Element dislocation solution and dislocation solution during html page scrolling

Element dislocation solution and dislocation solution during html page scrolling

A page with a complex layout. When running on a mobile browser, some mobile phones with poor configuration will scroll the scroll bar, and the page will scroll normally, but some elements appear similar to position: fixed is usually suspended on the page and then rolled. It looks a little like parallax scrolling, but it is not easy to see at all.

Solution: add the style: transform: translateZ (0);-webkite-transform: translateZ (0) to the slider ).

<Div style = "height: 300px; overflow: auto"> <div style = "transform: translateZ (0);-webkite-transform: translateZ (0 ); "> various complex html <div> </div>

The goal is to use GPU acceleration (GPU cache ).

Because of this problem, if you use overflow: auto to slide the page (in the form of html scroll bars), the browser will frequently have scroll, update layer tree, and composite layers each time the page slides. It should be due to a problem in the last step. This problem should be caused by layout.