我正在处理的网页出现问题。在 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;
应用于已应用 css 变换的元素。
在您的情况下,如果您使用背景图像,它将无法工作,因此只需创建一个类并应用它,如下所示:
.stop-flickering {-webkit-transform:translate3d(0,0,0);}
您也可以尝试:
-webkit-transform-style: preserve-3d;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)