如何修复 WebKit 中的闪烁过渡？答案

【问题标题】：How can I fix flickering transitions in WebKit?如何修复 WebKit 中的闪烁过渡？
【发布时间】：2013-12-03 01:31:37
【问题描述】：

我写了一个纯 CSS3 幻灯片，这里是 http://jsfiddle.net/chinhvotrung/JQTf4/15/。

但是，我不知道要修复每当鼠标悬停在此处时发生的闪烁错误。我曾经对我的所有选择器使用背面可见性，但它对我不起作用。请帮帮我

div.items > div.my-img > img{ /*Flicker occur by this....*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; }

div.items > div.my-img:hover img{ /*And this....*/
cursor: pointer;
transform:scale(1.5);
-ms-transform:scale(1.5);
-moz-transform:scale(1.5); 
-webkit-transform:scale(1.5); 
-o-transform:scale(1.5);
opacity:0.3; }

【问题讨论】：

我当然没有遇到任何闪烁。当它从左到右再向后移动时，我正在经历一点点“嘎嘎”，但我不确定是什么原因造成的。
大家好，请通过我在 chrome 中的演示浏览看看会发生什么！在 Mozilla 中这对我来说还不错，但是 Chrome 和我对这个问题没有答案
抱歉，我确实使用了 Chrome。没有闪烁。只是“咕噜咕噜”（每秒几次，它会暂时停止并重新拾起）。不幸的是，调试这种东西有点困难，因为它取决于您的 GPU 设置、驱动程序和 Chrome 设置。
对不起，Jay，我不知道确切的词来解释这个问题，但看起来就像你上面所说的那样，当鼠标悬停在幻灯片之外时就会出现问题，我们可以解决这个问题吗？
奇怪的是，我已经尝试了你的代码（并切换到使用带有翻译的转换）和我的旧笔记本电脑（我之前使用的同一个），Mozilla 是浏览器产生了很多的闪烁！所以这真的取决于你的设置。我希望我能给出更好的答案。我有另一台较新的笔记本电脑可以检查，我怀疑那里可能没有任何问题，但目前这有点麻烦。

标签： css css-transitions slide flicker

【解决方案1】：

在我的设置中，闪烁来自左侧属性的动画，而不是缩放和不透明度的动画。

我改了

@-webkit-keyframes myExample {
    0% { -webkit-transform: translateX(0px); }
    50% { -webkit-transform: translateX(-900px); }
    100% { -webkit-transform: translateX(0px); }
}
@-moz-keyframes myExample {
    0% { left: 0; }
    50% { left: -600px; }
    100% { left: 0; }
}

而且，至少对我来说，它工作正常

updated fiddle

在 webkit (900) 和 firefox (600) 之间已经不同的 webkit 版本中移动的像素

【讨论】：