Safari 7.0 CSS過渡很慢

我設計了一個使用佔位符div元素（縮小和展開）的小無限傳送帶，接下來是一些圖像，在單擊按鈕時滾動到一邊，之後移動的元素關屏幕再次移動到隊列的後面。在一個容器div元素內。Safari 7.0 CSS過渡很慢

它在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>

來源

2013-10-29 Theunis

您已經複製了'-webkit-transform：translateZ（0）;'聲明，但我沒有看到其他任何錯誤。 – BoltClock

謝謝@BoltClock。會修復那麼久。 – Theunis

我已經在我的網站主要是基於CSS過渡使用Safari 7在很多很多地方相同的問題。關於css轉換的平滑性，Safari 7向後退了一步。我搜索了很多，但似乎仍然是一個罕見的興趣。希望這會改變，並在即將到來的更新中帶來更好的Safari 7版本。還有色差問題... 所以我不認爲它與你的代碼有關！希望這有所幫助。

來源

2014-04-19 11:02:24 Garavani

Safari 7.0 CSS過渡很慢

回答

相關問題