Html Safari CSS转换闪烁

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

---

我真的需要一些提示来解决这个问题。谢谢大家!

您可以尝试

-webkit背面可见性：隐藏应用于已应用css转换的元素

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

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

您也可以尝试：

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

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

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

-webkit-backface-visibility: hidden;

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

我在一个空的div上制作了一个动画来创建一个跳动的圆圈，解决方案是使用伪元素
：在
之前，闪烁消失了
你试过了吗-webkit backface visibility:hidden？它似乎对闪烁没有任何影响。你能用它创建一个js小提琴吗？你有Chrome和Safari上的闪烁吗？是的，我现在就创建它。我在Safari中的CSS渐变期间/之后遇到了这个问题（渐变元素中的字体闪烁和/或出现粗体变化），其他在线解决方案没有帮助。这里的第二个解决方案（-webkit transform:translate3d（0,0,0）；）为我解决了这个问题（尽管字体的淡入速度似乎仍然比元素的其余部分慢一点）。谢谢，我永远也解决不了这个问题！您在

之前添加了什么？