更改宽度时叠加的图像闪烁

Question

我正在做图像比较功能。它工作得很好，除了前（蓝色）图像改变宽度时图像闪烁之外。似乎是某种问题z-index？

行为因所使用的浏览器而略有不同：

• Safari：忽隐忽现

• 铬：闪烁很多

• Firefox：始终显示绿色图像

const $imageSlider = document.querySelector(".image-slider");

const $sliderHandle = $imageSlider.querySelector(".image-slider__handle");

const $container = $imageSlider.querySelector(".image-slider__container--left");

const handleMouseMove = event => {

  const sliderPosition = `${(event.offsetX / $imageSlider.offsetWidth) * 100}%`;

  $container.style.width = sliderPosition;

  $sliderHandle.style.left = sliderPosition;

};

$imageSlider.addEventListener("mousemove", event =>

  requestAnimationFrame(() => handleMouseMove(event))

);

.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%;

}

<p>Move the mouse across the surface below to compare images:</p>

<div class="image-slider">

  <div class="image-slider__container image-slider__container--left">

    <img src="https://via.placeholder.com/200/0000FF/808080?text=Lorem" class="image-slider__image" alt="" />

  </div>

  <div class="image-slider__container image-slider__container--right">

    <img src="https://via.placeholder.com/400/00FF00/808080?text=Ipsum" class="image-slider__image" alt="" />

  </div>

  <div class="image-slider__handle"></div>

</div>