Safari CSS过渡闪烁 [英] Safari CSS Transition flickering

问题描述

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

I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.

我有2个元素，即水平滚动和背景图像，而这两个元素之间的过渡是使用CSS3 transformX()进行的.首先，这两个元素会重叠(以便您可以看到第二个元素的背景图像)，当您单击向右箭头时，第二个元素会从右向左滑动.当您单击右键时，第一个元素从左向右滑动

I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right

当我回到第一个元素时，第二个元素闪烁，就像重新排列其位置一样.

When I go back to the first element, the second element flickers, like rearranging its position.

.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;
}

我真的可以使用一些关于如何解决此问题的提示.谢谢！

I could really use a few hints on how i could solve this. Thank you!

推荐答案

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

You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.

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

In your case if you are using background images that it won't work so just create a class and apply it like:

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

您也可以尝试:

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

这篇关于Safari CSS过渡闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！