iOS transition Translate splash screen problem summary

The

WebKit divides the structure into layers when the page is drawn, and becomes a large tiled layer when the layer is large enough. In this way, WebKit does not need to render the entire page each time the page structure changes, but renders the corresponding layer, which is quite important for rendering speed. WebKit will allocate a certain size of the various layers of "backup memory" in memory cache, this is the context of drawing layer, through this context can easily achieve a variety of effects (animation, 3D transformation, etc.), "Backup Memory" memory footprint not only depends on the layer, and the device and display mode is also related, Suppose this is 1:1 on the normal screen, but 1:2 on the retina screen, and this amount will multiply when zoomed in, and a picture is 10x10, and the normal screen is assigned the 10x10,retina initial 20x20. This also indicates that the retina is more memory-intensive. When the layer is large, it means that the "backup memory" consumes more memory, in order to avoid this, WebKit does not draw a large layer to store a large page, for example, the tile layer will be split into a lot of blocks to draw, that is, to occupy as little memory as possible, just to render the part of the visible range. That's why when we scroll through large pages, we find that the following content slowly shows up, and the above content slowly shows up when scrolling up.

The following is a scene webkit divided into layers:

1. pages The main container is always a separate tiled layer
2. when drawing intensive elements, such as <video>, <canvas>
3. elements that apply 3D transformations, including Translate3d, Rotate3d, Translatez
4. when content is enhanced, such as filters, masks, reflections, opacity, transitions, animations
5. in some special cases, such as position:fixed,-webkit-overflow-scroll:touch
6. any content that is overwritten on a known layer

WebKit does not render the entire allocated memory for such a large layer, so it solves this problem simply by caching the list item elements of the viewable range of the scrolling region.

Workaround:

?

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>

If the above structure of the multi-figure moving around to see, J-scroller is a very large animation moving layer, we set the J-scroller translate3d (x, Y, z) and transition animation,

The iphone looks like a splash screen when it moves, because WebKit does not draw the entire allocated memory for the J-scroller so large .

In this time we need to cache the list item item element of the scrolling area visual range

?

1 2 3

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

Also: When translate uses 2d instead of 3d rendering, we want to set the current animation moving element to be rendered in 3d, with all its child elements hidden back

?

1 2 3 4 5 6

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

　　

Reference Link: http://www.tuicool.com/articles/rYby6v