title: Superimposed images flicker when changing width
body: <p>I'm making an image comparison feature. It's working fairly well, except that the images flicker when the front (blue) image is changing width. It appears to be some sort of issue with <code>z-index</code>?</p>
  
  <p>Behavior differs slightly depending on browser used:</p>
  
  <ul>
  <li><strong>Safari</strong>: flickers a bit</li>
  <li><strong>Chrome</strong>: flickers a lot</li>
  <li><strong>Firefox</strong>: shows the green image at all times</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const $imageSlider = document.querySelector(".image-slider");
  const $sliderHandle = $imageSlider.querySelector(".image-slider__handle");
  const $container = $imageSlider.querySelector(".image-slider__container--left");
  
  const handleMouseMove = event =&gt; {
    const sliderPosition = `${(event.offsetX / $imageSlider.offsetWidth) * 100}%`;
    $container.style.width = sliderPosition;
    $sliderHandle.style.left = sliderPosition;
  };
  
  $imageSlider.addEventListener("mousemove", event =&gt;
    requestAnimationFrame(() =&gt; handleMouseMove(event))
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.image-slider {
    position: relative;
    display: inline-block;
  }
  
  .image-slider__handle {
    content: " ";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    display: block;
    width: 0.25rem;
    background-color: white;
    transform: translateX(-50%);
  }
  
  .image-slider__container {
    height: 100%;
  }
  
  .image-slider__container--left {
    position: absolute;
    width: 50%;
    overflow: hidden;
  }
  
  .image-slider__image {
    display: block;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Move the mouse across the surface below to compare images:&lt;/p&gt;
  
  &lt;div class="image-slider"&gt;
    &lt;div class="image-slider__container image-slider__container--left"&gt;
      &lt;img src="https://via.placeholder.com/200/0000FF/808080?text=Lorem" class="image-slider__image" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="image-slider__container image-slider__container--right"&gt;
      &lt;img src="https://via.placeholder.com/400/00FF00/808080?text=Ipsum" class="image-slider__image" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="image-slider__handle"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>