Safari CSS Transition flickering

Question

我正在处理的网页出现问题。在 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;
}

我真的可以使用一些关于如何解决这个问题的提示。谢谢你！

Answer 1

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

在您的情况下，如果您使用背景图像，它将无法工作，因此只需创建一个类并应用它，如下所示：

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

您也可以尝试：

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

Answer 2

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

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

-webkit-backface-visibility: hidden;

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

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