Question

我设计了一个使用占位符div元素（收缩和扩展）的小无限轮播，然后是一些按钮点击滚动到一侧的图像，之后移出屏幕的元素移动到后面再次排队。在容器div元素内。

它在Chrome和Firefox上完美运行但在Mavericks OS X上的Safari 7.0上转换非常缓慢/锯齿。我已经尝试了一些记录在案的黑客来修复它但是看不到任何改进。

我想知道有人可以看看下面的CSS，并告诉我是否将黑客放在正确的元素上吗？

#ContentGallery {
    background-color: black;
    z-index:1;
    height: 600px;
    position: absolute;
    width: 2600px;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-perspective: 1000;
}

.flipPagePhoto {
    display: inline-block;
    -webkit-transition: margin-left 0.75s ease-out;
    -moz-transition: margin-left 0.75s ease-out;
    -o-transition: margin-left 0.75s ease-out;
    transition: margin-left 0.75s ease-out;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; 
}

.flipPagePlacehold {
    float: left;
    margin-left: -100px;
    width:300px;
    height: 600px;
    -webkit-transition: margin-left 0.86s ease-out;
    -moz-transition: margin-left 0.86s ease-out;
    -o-transition: margin-left 0.86s ease-out;
    transition: margin-left 0.86s ease-out;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; 
}

<div id="ContentGallery">
    <div class="flipPagePlacehold static"></div>
    <img class="flipPagePhoto">
    <!-- More images follow -->
</div>

Answer 1

我在网站上的很多地方都遇到了与Safari 7相同的问题，主要是基于css过渡。对于css过渡的平滑性，Safari 7向后退了一步。我google了很多，但似乎仍然是一个罕见的兴趣问题。希望这会改变，并在即将到来的更新中导致更好的Safari 7版本。还有色差问题...... 所以我认为它根本不涉及你的代码！希望这有点帮助。

Safari 7.0 CSS转换很慢

1 个答案: