Safari CSS过渡闪烁
提问于 2014-07-29 07:38:31
我正在处理的网页有问题。在Firefox上，这似乎没有任何问题。
我有两个元素，水平滚动，与背景图像和这两个之间的过渡是使用CSS3，transformX()。首先，这两个元素重叠(这样你就可以看到第二个元素的背景图像)，当你单击右箭头时，第二个元素从右向左滑动到前面。单击鼠标右键时，第一个元素会从左向右滑动
当我返回到第一个元素时，第二个元素闪烁，就像重新排列它的位置一样。
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}我真的需要一些关于如何解决这个问题的提示。谢谢!
回答 2
Stack Overflow用户
发布于 2014-07-29 07:41:58
您可以尝试将-webkit-backface-visibility: hidden;应用于已应用css转换的元素。
在您的例子中，如果您使用的是不起作用的背景图像，那么只需创建一个类并应用它，如下所示：
.stop-flickering {-webkit-transform:translate3d(0,0,0);}您也可以尝试：
-webkit-transform-style: preserve-3d;Stack Overflow用户
发布于 2020-01-22 09:12:12
在我的例子中，这些方法都不起作用：
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;我在一个空的div上有一个动画来创建弹跳圈，解决方案是使用伪元素:before，然后闪烁就消失了
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25010353
复制相关文章
点击加载更多
腾讯云开发者
