Javascript 改变宽度时，叠加图像闪烁

我正在制作一个图像比较功能。它的工作相当好，除了图像闪烁时，前面（蓝色）图像改变宽度。这似乎是

z-index

的某种问题

根据使用的浏览器，行为略有不同：

• Safari：闪烁一点
• Chrome：闪烁很多
• Firefox：始终显示绿色图像

const$imageSlider=document.querySelector（“.image slider”）；
常量$sliderHandle=$imageSlider.querySelector（“.image-slider\uuuu句柄”）；
const$container=$imagesslider.querySelector（“.image-slider\uuu container--left”）；
const handleMouseMove=事件=>{
常量sliderPosition=`${（event.offsetX/$imageSlider.offsetWidth）*100}%`；
$container.style.width=滑块位置；
$sliderHandle.style.left=滑块位置；
};
$imageSlider.addEventListener（“mousemove”，事件=>
requestAnimationFrame（（）=>handleMouseMove（事件））
);
。图像滑块{
位置：相对位置；
显示：内联块；
}
.image-slider__手柄{
内容：“；
位置：绝对位置；
左：50%；
排名：0；
底部：0；
显示：块；
宽度：0.25雷姆；
背景色：白色；
转化：translateX（-50%）；
}
.image-slider\u容器{
身高：100%；
}
.image-slider\u容器--左侧{
位置：绝对位置；
宽度：50%；
溢出：隐藏；
}
.image-slider\u图像{
显示：块；
身高：100%；
}
在下面的表面上移动鼠标以比较图像：

 > > P>我会考虑使用多个背景和更少的代码的一种更简单的方法。通过使用
背景剪辑
和
内容框
我可以通过增加或减少填充来调整可见部分：


const$imageSlider=document.querySelector（“.image slider”）；
const handleMouseMove=事件=>{
$imagesslider.style.paddingLeft=event.offsetX+“px”；
};
$imageSlider.addEventListener（“mousemove”，事件=>
requestAnimationFrame（（）=>handleMouseMove（事件））
);
。图像滑块{
宽度：400px；
高度：200px；
背景：
/*位于内容框左侧的一条白线（宽：4倍高：100%）*/
线性渐变（#fff，#fff）左/4px 100%内容框，
/*顶部图像a的中心剪裁到内容框，但相对于填充框定位*/
网址(https://via.placeholder.com/200/0000FF/808080?text=Lorem)居中/覆盖填充框内容框，
网址(https://via.placeholder.com/200/00FF00/808080?text=Ipsum)中心/盖；
背景重复：无重复；
框大小：边框框；
}
在下面的表面上移动鼠标以比较图像：

闪烁是由于在悬停时运行的逻辑中影响图像滑块的“悬停”而引起的。将滑块悬停会移动鼠标下的控制柄，此时控制柄会截取悬停事件，从而使进一步悬停的偏移值相对于控制柄而不是滑块进行计算。一旦鼠标离开手柄，它会再次正确地在滑块上引发
mousemove
事件

通过将
指针事件：none
应用于可能阻止（和截获）指针事件的所有元素，可以很容易地解决这一问题

请原谅在惯例上的改变-我为自己重新命名了一些类


const imagesslider=document.querySelector（'.slider'）；
const sliderHandle=imagesslider.querySelector（'.handle'）；
const container=imagesslider.querySelector（'.pane.left'）；
imageSlider.addEventListener（'mousemove'，事件=>{
常量sliderPosition=`${（event.offsetX/imagesslider.offsetWidth）*100}%`；
container.style.width=滑块位置；
sliderHandle.style.left=滑块位置；
});
滑块{
位置：相对位置；
显示：内联块；
}
.slider>.handle{
内容：“；
位置：绝对位置；
左：50%；
排名：0；
底部：0；
显示：块；
宽度：0.25雷姆；
背景色：白色；
转化：translateX（-50%）；
指针事件：无；/*不将鼠标事件阻止到.slider*/
}
.slider>.pane{
身高：100%；
指针事件：无；/*不将鼠标事件阻止到.slider*/
}
.slider>.pane.left{
位置：绝对位置；
宽度：50%；
溢出：隐藏；
}
.slider>.pane>img{
显示：块；
身高：100%；
}
在下面的表面上移动鼠标以比较图像：

当鼠标轻轻向右/向左移动一点时，蓝色图像会完全消失。@iLuvLogix是的，也会发生这种情况。如果不格式化字符串，效果会更好，然后检查
如果（sliderPosition>1）
，如果通过，则格式化并设置样式值。就像可以来回争论一样，修复本身是最合适的，即使其他答案和评论也非常有用。谢谢啊哈，谢谢你给BEM的链接！现在我明白了疯狂的方法。