Solution to element misalignment when html page scrolls_html/css_WEB-ITnose

When a page with a more complex layout is run on a mobile browser, some phones with poor configurations will appear after scrolling the scroll bar. The page will scroll normally, but some elements will appear similar to position: fixed. Generally hover on the page and then scroll. It looks a bit like parallax scrolling, but not pretty at all.

Solution: Add style to the sliding body: transform: translateZ(0); -webkite-transform: translateZ(0).

<div style="height:300px;overflow:auto">    <div style="transform:translateZ(0);-webkite-transform:translateZ(0);">          各种复杂的html      <div></div>

The purpose of adding this is to take advantage of GPU acceleration (GPU cache).

Because of this problem, it was also discovered that if you use overflow:auto to slide the page (html scroll bar form), the browser will frequently scroll, update layer tree, and composite layers every time the page slides. There should be a problem in the last link. The reason for this problem should be the layout method.