Foreword

Everyone knows that position: fixed is used to generate absolutely positioned elements, positioned relative to the browser window. The location of the element is specified by the "left", "top", "right" and "bottom" attributes.

Suddenly I found that there was a small bug in the webpage I wrote before: In the settlement button part of the purchase page, there is an interaction that is normal based on the standard document static flow layout under the shopping cart. When the webpage monitor wheel is in the upper part, it will be fixedly fixed. Appears below the user's browser; because the button has a hover effect, there will be probabilistic jitter, as shown below:

Detailed description

After many tests, I found that jitter is probabilistic; the first intuition was that it was a Chrome browser problem, then tested different versions, and changed to other browsers, and found that there were problems; then I set the background color of all the boxes. Found a problem: the actual box model in the eye will be a little higher than the box model area pointed to by the mouse:

Jitter

Normal box model

This knows the specific problem, that is, the more than 1px pixels that are topped out, it seems that there is no problem in static view, but once some effects are added, there will be jitter and the experience is very poor. But because it is a probabilistic problem, suddenly I don’t know how to solve it?

problem solved

I tried it maybe a code conflict, so I deleted the relevant code, and it didn't work! Suddenly remembered that I had read an article about how to optimize the performance of animation. I said a solution to the jitter, so I tried to add:

-webkit-transform: translateZ(0);
transform: translateZ(0);
Copy code

Repeated testing, the bug is really solved.

to sum up

There are two general optimizations about css3 animation performance:

• Try to use transform as an animation, avoid using height, width, margin, padding, etc. directly;
• It is recommended to enable browser GPU hardware acceleration

Therefore, we use tanslateZ (0) to become a 3d effect, open the browser GPU hardware acceleration, improve the performance of the browser rendering; above the fixed positioning page element rearrangement redrawing the box model bug may be caused by web page rendering, So similar bugs or jitters can be tried with tanslateZ(0), but there are also disadvantages such as power consumption and heat.