css - Safari 7.0 CSS 转换缓慢

Question

我设计了一个无限旋转木马，它使用占位符 div 元素(收缩和扩展)，然后是一些图像，在单击按钮时滚动到一侧，之后移出屏幕的元素移到后面再次排队。在容器 div 元素内。

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

我想知道有人可以看看下面的 css 并告诉我 hack 是否放置在正确的元素上吗？

#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 转换。 Safari 7 在 css 过渡的平滑度方面倒退了一步。我在谷歌上搜索了很多，但似乎仍然很少有人感兴趣。希望这会有所改变，并在即将到来的更新中带来更好的 Safari 7 版本。还有色差问题……所以我认为这与您的代码完全无关!希望这会有所帮助。