How to fix friezes when scrolling?

Question

css

Hello! How do you fix bugs when scrolling the page? I can’t determine where the performance sags and how to fix it at all? I use everything I can’t find (brake + will-change + pointer-events + vanilla), but there are still subsidences. Slows down almost always at the time of js execution. Or, for example, when using the waypoint library.

Answer 1

Are you using requestanimationframe? friezes can be from the fact that the jsa event loop is not synchronized with the page rendering event by the browser itself.
Maybe you also change styles very often? this is also wrong, the DOM tree is very slow and the styles are also in it, try setting the style with animation, then the rendering goes to the browser and change the end point of the animation depending on the user's actions.

Answer 2

-webkit-overflow-scrolling: touch;