0

我设计了一个小的无限轮播，它使用占位符 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>
4

1 回答 1

1

我的网站上很多地方都存在与 Safari 7 相同的问题，主要是基于 css 转换。Safari 7 在 css 过渡的平滑度方面倒退了一步。我用谷歌搜索了很多，但似乎仍然很少有人感兴趣。希望这会有所改变，并在即将到来的更新中带来更好的 Safari 7 版本。还有色差问题……所以我认为这与您的代码无关！希望这有所帮助。

于 2014-04-19T11:02:24.030 回答