search

darkroomengineering / lenis

How smooth scroll should be
https://lenis.darkroom.engineering
MIT License
7.33k stars 316 forks source link

Scrolling stops/stutters on mobile #341

Closed pgirzalsky closed 1 month ago

pgirzalsky commented 1 month ago

I'm using Lenis on this website: https://habdank-2-0.webflow.io/

On mobile the scrolling stops abruptly and seemingly randomly (only seems to be happening on real mobile devices. Tested in iPhone 13, iOS 17.5.1).

feledori commented 1 month ago

Just scrolled and navigated around and couldn't repro your problem(iPhone 15, iOS 17.5). Maybe you can share a navigation sequence which triggers it.

P.S. You got some horizontal overflow on "Unternehmen" page.

pgirzalsky commented 1 month ago

Thanks for the quick response and catching a bug! Fixed that at least. I will try to reproduce the scrolling behaviour on other devices and check-in again.

nye commented 1 month ago

I had the same problem using Lenis with ScrollTrigger and what worked for me was removing this ScrollTrigger.normalizeScroll(true);

feledori commented 1 month ago

fixed?

pgirzalsky commented 1 month ago

I didn't have this line in my code before but ADDING it actually fixes my problem. Though I feel like the scrolling behaviour feels different now. Is there any direction you can point me so I can try to debug this problem or is it something I would have to discuss with the GSAP team?

clementroche commented 1 month ago

By default Lenis doesn't affect touch events unless you enable syncTouch. Does it scroll correctly if you remove Lenis ?

pgirzalsky commented 1 month ago

Well, it seems you're right and Lenis is not the issue. I just removed it again and it's still happening. I was so sure to have tested it without Lenis before creating this issue... Maybe I got confused in my versions.

It seems I have found the culprit now though. I have a function that refreshes the ScrollTrigger every time an image is being lazy loaded: Webflow.push(function () { const lazyImages = $("img[loading='lazy']"); lazyImages.each(function () { $(this).on("load", function () { ScrollTrigger.refresh(); }); }); });

Removing the ScrollTrigger.refresh(); fixes my issue. Now I just have to see how I fix recalculating the start/end positions of my triggers when the images finished loading since it changes the DOM height...