lea.verou.me icon indicating copy to clipboard operation
lea.verou.me copied to clipboard

Published 20 hours ago • verified publisher icon LeaVerou

Choppy Scrolling

Open ScriptRaccoon opened this issue 2 years ago • 8 comments

Page URL:

lea1.verou.me

What issues do you see?

Other

Description of issues

On my phone (Google Pixel 5, Android) the website scrolling is choppy. I tested with Adblock browser (1st recording) and Chrome (very similar, but slightly better). It does not happen with other, similar portfolio websites and is unrelated to internet speed. In the previous website, scrolling was much more choppy (2nd recording). The 1st recording does not make the issue very clear, it is easier to see on a real phone, or by decreasing the playback speed.

EDIT: My phone doesn't upload the recordings. I will add them as links in a moment.

New website: https://drive.google.com/file/d/1pH2dMqfj5rILhKwX04vO6kO1awkyXc9J/view?usp=drivesdk

Old website: https://drive.google.com/file/d/1pIH5Dmm0z0WjOnJvEXnjftN6RlEYFqRG/view?usp=drivesdk

ScriptRaccoon avatar Jul 18 '23 13:07 ScriptRaccoon

I think this is probably related to the background image animation on the header and footer. That would also explain why it’s less choppy now: Instead of making it play constantly when the element is in view, it now is tied to the scroll position.

I wonder if there’s a way to detect the devices where this would affect scrolling speed (e.g. in my MacBook Pro it doesn’t seem to) and disable it then. Also, once @scroll-timeline gets wider support it may also allow improving this.

LeaVerou avatar Jul 19 '23 10:07 LeaVerou

Indeed, when I remove the footer and the header, the scrolling works much better. (I used USB debugging for that.) There is still another issue then (the "learn about me" button is flashing), but it is definitely worth a try to look there. By the way, I tried to clone your repo and run the dev server. The console looks fine, Netlify works, but the browser gives me a 404 page. So I am afraid that, for now, I cannot contribute.

ScriptRaccoon avatar Jul 21 '23 12:07 ScriptRaccoon

I can confirm this behavior on my phone too.

opatry avatar Jul 23 '23 16:07 opatry

Is the choppy scrolling present even when neither the header nor the footer is visible on screen?

LeaVerou avatar Jul 24 '23 10:07 LeaVerou

A bit less but yes, still not very smooth.

opatry avatar Jul 24 '23 11:07 opatry

Another question: Is this different in posts that don't have a table of contents, e.g. https://lea.verou.me/blog/2021/06/inherit-ancestor-font-size-for-fun-and-profit/ ?

LeaVerou avatar Jul 24 '23 11:07 LeaVerou

It seems similar to other page.

opatry avatar Jul 24 '23 19:07 opatry

Same problems with scrolling

https://github.com/user-attachments/assets/5f434b59-df13-4090-8286-5570299e83c7

SarasovMatvey avatar May 12 '25 04:05 SarasovMatvey