ios transition translate 閃屏問題總結

標籤：style   c   class   blog   code   java   

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是不會將這麼大的層整個分配記憶體繪製渲染的，所以，只要將捲動區域可視範圍的清單項目元素緩衝起來就解決這個問題了。

 

 

解決方案：

?

1 2 3 4 5 6 7

<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元素緩衝起來

?

1 2 3

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

 

另外：當translate使用2d而非3d的呈現方式時，我們要設定當前動畫移動元素的呈現方式為3d，它的所有子項目背面隱藏

?

1 2 3 4 5 6

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

　　

 

 

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