Safari CSS 过渡闪烁答案

【问题标题】：Safari CSS Transition flickeringSafari CSS 过渡闪烁
【发布时间】：2014-07-29 07:38:31
【问题描述】：

我正在处理的网页有问题。在 Firefox 上，它似乎没有任何问题。

我有 2 个元素，水平滚动，带有背景图像，这两个元素之间的过渡是使用 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;
}

我真的可以使用一些提示来解决这个问题。谢谢！

【问题讨论】：

你试过 -webkit-backface-visibility: hidden 吗？

标签： html css safari transform

【解决方案1】：

您可以尝试将-webkit-backface-visibility: hidden; 应用于已应用 css 转换的元素。

在您的情况下，如果您使用的背景图片不起作用，那么只需创建一个类并像这样应用它：

.stop-flickering {-webkit-transform:translate3d(0,0,0);}

你也可以试试：

-webkit-transform-style: preserve-3d;

【讨论】：

对闪烁似乎没有任何影响。
你能用它创建一个 js fiddle 吗？你有 Chrome 和 Safari 的闪烁吗？
是的，我现在就创建它
我在 Safari 中的淡入 CSS 过渡期间/之后遇到了这个问题（过渡元素内的字体闪烁和/或粗体似乎发生了变化），而其他在线解决方案则没有帮助。这里的第二个解决方案（ -webkit-transform:translate3d(0,0,0); ）为我解决了这个问题（尽管字体似乎仍然比元素的其余部分慢一点）。谢谢，我永远不会解决这个问题！

【解决方案2】：

就我而言，这些方法都不起作用：

-webkit-transform:translate3d(0,0,0);

-webkit-backface-visibility: hidden;

-webkit-transform-style: preserve-3d;

我在一个空的 div 上有一个动画来创建弹跳圈，解决方案是使用伪元素 :before 并且闪烁消失了

【讨论】：

你把:before添加到什么了？