I remember that the mobile terminal does not support native scrolling, that is, it does not support overflow: scroll; so there is a solution framework like isscroll. But the latest Safari starts to support it. The specifics can be found everywhere if you search, so I won’t list them here.
The key is not hardware acceleration, but whether to reflow.
A reflow is a more significant change. This will happen whenever the DOM tree is manipulated, whenever a style is changed that affects the layout, whenever the className property of an element is changed, or whenever the browser window size is changed.
Using margin/top modification will trigger reflow and slow down the speed.
Elements that are positioned absolutely or fixed, do not affect the layout of the main document, so if they reflow, they are the only thing that reflows. The document behind them will need to repaint to allow for any changes, but this is much less of a problem than an entire reflow.
The reflow of absolute and fixed elements will not affect the whole, but it is still not as good as transform which only requires repaint.
The difference between translate and translate3d lies in hardware acceleration.
It’s a performance issue. The focus map effects on the mobile side are all made by translate3d, so that the movement effect is smoother instead of one card after another
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I remember that the mobile terminal does not support native scrolling, that is, it does not support overflow: scroll; so there is a solution framework like isscroll. But the latest Safari starts to support it. The specifics can be found everywhere if you search, so I won’t list them here.
The key is not hardware acceleration, but whether to reflow.
Using margin/top modification will trigger reflow and slow down the speed.
The reflow of absolute and fixed elements will not affect the whole, but it is still not as good as transform which only requires repaint.
The difference between translate and translate3d lies in hardware acceleration.
Reference material: https://dev.opera.com/articles/efficient-javascript/?page=3#reflow
translate3d can enable hardware acceleration to improve performance.
It’s a performance issue. The focus map effects on the mobile side are all made by translate3d, so that the movement effect is smoother instead of one card after another
overflow:hidden; Lots of pitfalls. .