Mobile Web page scrolling is not smooth, stutter flash solution

The-webkit-overflow-scrolling property on the 1.ios side controls the page scrolling effect, which is set to implement inertia scrolling and elasticity effects as follows:

-webkit-overflow-scrolling:touch

Page scrolling is not smooth due to 2.position properties:

<div style="overflow-x: hidden; Overflow-y: auto; Position:absolute; height:200px; ">    <div style="position:relative; height:200px; "></div>    <div style="position:relative; height:200px; "></div>    <div style="position:relative; height:200px; "></div></div>

As shown in the code above, when there is relative positioning in the absolute positioned container and the height is greater than the external container, the container's scrolling will appear a flicker phenomenon, the workaround is as follows:

 <div style= " overflow-x: hidden; Overflow-y: auto; Position:absolute; height:200px;   " > <div style="  position:absolute; top:0; left:0;   " > <div style="  position:relative; height:200px;   " ></div> <div style="  position:relative; height:200px;   " ></div> <div style="  position:relative; height:200px;   " ></div> </div></div> 

You can fix the scrolling flicker problem by wrapping the internal relative elements with a absolute container.

Mobile Web page scrolling is not smooth, stutter flash solution