The problem of fixed element jitter on the mobile side

Work found that to add a fixed property to an element, so that it fixed in a window, the direct addition of fposition:fixed properties can achieve this effect;

The effect on the Android phone is better, but the iOS system's individual browser compatibility is not good, such as QQ browser, UC Browser, 360 browser (these are the most vulnerable browsers iOS);

Problem: When the user quickly swipe the page, the fixed element will bounce or jitter in the window, which greatly affects the user experience

The following provides a few solutions, for reference only, if there is a better and more effective solution, welcome message exchange Discussion!

Method One:

Set height to Body 100%

body,html{    widht:100%;    height:100%;}

This method works well, but it works on pages that you develop separately.

If the page is already in the project and there are other effects, setting this property directly may affect other features of the page.

If you use this method, the local debugging effect is not good, it is recommended not to use.

Method Two:

Add a background positioning property to a fixed element

background-attachment:fixed;

Avoid: This attribute does not add to the element with background picture

This method seems to be effective, because there is no test machine restrictions, can not test the effect, a qualified friend to try;

Here are the other methods found on the network, I tried not to work, listed for everyone to refer to

Method Three:

Add the Transform property to fixed positioned elements

Transform:translatez (0); Transform:Translate3d (0,0,0);

The result of my attempt is that this method has no effect;

Method Four:

Add a layer of box, the outer fixed positioning, the inner layer of the set absolute positioning absolute;

There is also a way to say that the absolute positioning can be simulated fixed positioning, I do not have a simulation, the method provided on the Internet has not achieved this effect.

The problem of fixed element jitter on the mobile side