D
D
Denis2020-06-22 11:05:24
css
Denis, 2020-06-22 11:05:24

Twitching scroll on the phone on the computer version of the scrolling is normal?

Scroll twitches on the phone on the computer version scrolling is normal
Site

spoiler
avtoklimat.beget.tech

Tell me what to do please

Answer the question

In order to leave comments, you need to log in

3 answer(s)
F
Flying, 2020-06-22
@De__nis

First of all, you need to profile the render load through a profiler, "twitching" means fps drawdown, and fps drawdown means that main thread tasks don't fit into 16ms to provide 60fps.
If you open the site in Firefox, it immediately indicates a possible cause: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla /Perform... "
A quick look shows that this is indeed the case - you have included jquery.sticky.js , created already in 2012 and implementing what is now done through position: sticky or IntersectionObserverby attaching a handler to the event scroll. This leads to the fact that for every movement of the page, a JavaScript handler is launched and creates changes in the DOM that lead to the need to recalculate styles, and even layout'a.
Changes to the DOM are generally quite an expensive operation, and layout recalculation is even more so, so it is logical that on weaker CPUs of mobile devices this does not fit into the time budget.
In general, the reason for the rather poor performance is that you took the path of least resistance by taking a ready-made theme for WordPress. They are usually heavily overloaded with scripts due to the desire to make them flexible and versatile, which, of course, works to the detriment of performance.
So start by replacing jquery.sticky.js with a normal solution, and then double-check the result with a profiler and see what else you can throw away. Your page visually clearly does not require those 900kb of scripts that you load on it.

V
Vladimir, 2020-06-22
@Casufi

Check if you have a lot of elements with absolute positioning, most often their excess is the cause of twitching on mobile devices.

O
Oleg, 2020-06-22
@politon

I would start by removing the errors in the console...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question