preface

You know that position: fixed is used to generate an absolutely positioned element relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.

Suddenly I found a small bug in the web page I wrote before: in the settlement button part of the purchase page, there was an interaction that the normal flow layout was based on the standard document static under the shopping cart. When the web page monitoring wheel was located in the upper part, the fixed position would appear under the user’s browser. Because the button has an hover effect, it will appear probability jitter, as shown below:

Detailed instructions

The jitter was found to be probabilistic. At first I thought it was Chrome, then I tested different versions and other browsers and found that there was a problem. Then I set the background color of all the boxes and found a problem: the actual box model in the eye would be a little higher than the box model area indicated by the mouse:

There are shaking

Normal box model

This is the specific problem, that is, the extra 1px pixels seem to be fine in static view, but once some dynamic effects are added, there will be jitter, poor experience. But because it’s a probabilistic problem, suddenly you don’t know how to solve it, right?

Problem solving

Tried may be code conflict, so the relevant code was deleted, also no! Suddenly remembered that I had read an article about how to optimize animation performance, which said a solution to jitter, so I tried to add:

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

Over and over again, the bug is really fixed.

conclusion

There are two general cSS3 animation performance optimization:

  • Use the transform as animation familiar as far as possible, avoid direct use of height, width, margin, padding, etc.
  • You are advised to enable GPU hardware acceleration in the browser

So, we use tanslateZ(0) to turn the 3d effect and enable browser GPU hardware acceleration to improve browser rendering performance; TanslateZ (0) can be used to solve the same bug, but it also has the disadvantages of power consumption and heating.