Bug 287449 – Filter: Drop-shadow on slider container glitches with image + scale property + transform + transition

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Paul Rhomberg]

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.

[Simon Fraser (smfr)]

*** This bug has been marked as a duplicate of bug 207586 ***