iostransitiontranslate闪屏问题总结

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