TranslateZ性能問題在移動

Question

我試圖實現這個http://codepen.io/keithclark/pen/JycFw，但經歷了嚴重的電影和使用手機在鉻的滯後。

#slide1:before { 
    background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"); 
    transform: translateZ(-1px) scale(2); 
    z-index:-1; 
} 

經過研究，我試圖使用變換3d，背面，透視等，但仍然經歷了滯後的滾動體驗。

Answer 1

TransformZ必然會滯後設備，因爲它會強制設備呈現它，就好像它是3d一樣。我不知道如何解決這個問題，但這裏是jQuery和CSS取得了一定的替代視差效應：

http://andyshora.com/parallax.html

http://www.devfloat.com/jquery-parallax-scrolling-tutorials/

我希望這些幫助你！