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

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>