ios transition translate 閃屏問題總結

webkit在繪製頁面時會將結構分爲各類層，當層足夠大時就會變成很大的平鋪層。這樣一來webkit在每次頁面結構發生變化時不須要都渲染整個頁面而是渲染對應層了，這對渲染速度來講至關的重要。webkit會給各類層分配必定大小的「後備存儲器」在內存裏緩存起來，這就是繪製層的上下文，經過這個上下文就能夠很容易的實現各類效果（動畫，3D變換等），「後備存儲器」內存佔用大小不只依層而定，跟設備和顯示方式也是有關的，假設這在普通屏幕下是1：1的，但在Retina屏幕下則是1：2的，而且放大時這個量會成倍增長；一張圖片是10X10，普通屏幕分配的就是10X10，Retina初始則是20X20。這也代表Retina是更加消耗內存的。當層很大時，意味着「後備存儲器」會消耗更大的內存，爲了不這點，webkit並不會繪製一個很大的層來存儲一個很大的頁面，好比說平鋪層則會拆分紅不少的塊來繪製，即盡佔用儘量小的內存，只是將可視範圍內的那部分渲染出來。這就是爲何咱們在大頁面滾動時會發現下面的內容慢慢顯示，向上滾動時上面的內容還慢慢顯示的緣由。

如下則是webkit劃分爲層繪製的場景：

1. 頁面主容器永遠是獨立的平鋪層
2. 繪製密集型元素時，如<video>, <canvas>
3. 應用3D transformations的元素，包括translate3d, rotate3d, translateZ
4. 內容被增強時，如Filters, masks, reflections, opacity, transitions, animations
5. 某些特殊的狀況下也會，如position:fixed, -webkit-overflow-scroll:touch
6. 任何在已知層上覆蓋的內容

     webkit是不會將這麼大的層整個分配內存繪製渲染的，因此，只要將滾動區域可視範圍的列表項元素緩存起來就解決這個問題了。

 

 

解決方法：

<div class="J-slider" style="width:320px;height:600px">
　<div class="J-scroller" style="width:960px;height:600px;>
　　　　<div class="item"></div>
　　　　<div class="item"></div>
       <div class="item"></div>
　　</div>
</div>

假如以上結構的多圖左右移動查看， J-scroller是一塊很大的動畫移動層，咱們對J-scroller設置了 translate3d(x,y,z)  以及transition 動畫，

此時iphone查看移動時會有閃屏現象，由於webkit是不會將J-scroller這麼大的層整個分配內存繪製渲染。

這時候咱們須要將滾動區域可視範圍的列表項item元素緩存起來

.item{
    -webkit-transform: translate3d(0,0,0);
}

 

另外：當translate使用2d而非3d的呈現方式時，咱們要設置當前動畫移動元素的呈現方式爲3d，它的全部子元素背面隱藏

.J-scroller{
    -webkit-transform-style: preserve-3d;
}
.J-scroller item{
    -webkit-backface-visibility: hidden;
}

　　

 

 

參考連接： http://www.tuicool.com/articles/rYby6v