Bug 287449

Created attachment 474196 [details] The bug in action Hello, I have found a very peculiar bug where the drop shadow on a container is glitching out with a certain code setup. This bug affects a web-game of mine. This is what I've narrowed this down to: HTML: <div class="slider-outer"> <!-- Image --> <div class="image"> <img src="https://placehold.co/600x400" alt="image" /> </div> <!-- Slider box with shadow --> <div class="slider-shadow-container"> <div class="slider-content"> <div class="price-slider"> <div class="slider-wrapper"> <div class="slider-section"> <input type="range" step="1" min="0" max="100" value="50" class="slider w-full" /> </div> </div> </div> </div> </div> </div> CSS: .slider-outer { position: fixed; bottom: 0; width: 100%; z-index: 20; display: flex; justify-content: center; } .image img { width: 200px; /* This is necessary! */ } .slider-content { display: flex; flex-grow: 1; width: 100%; } .price-slider .slider-wrapper { width: 100%; display: flex; align-items: center; height: 4.2rem; border-radius: 0.5rem; background-color: grey; padding: 0.5rem; filter: drop-shadow(0 0.3rem 0 rgba(150, 155, 155, 0.8)); } /* Global slider thumb styling */ .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2.5rem; height: 2.5rem; transition: scale 150ms ease; transform: translateY(-0.1rem); /* Without the transform, it still happens, but only when dragging the slider to the border */ } .slider::-webkit-slider-thumb:active { scale: 0.9; /* This is necessary */ } Codepen example: https://codepen.io/therealpaulplay/pen/RNwwNam Video showing the issue is attached.