Navigation issue with Astro <ClientRouter> and Lenis smooth scroll

[titouan-pellerin]

Astro Info

Astro                    v5.0.5
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

Firefox (Chrome also triggers a warning about navigation throttle)

Describe the Bug

When using Astro’s <ClientRouter> component in combination with the Lenis smooth scroll library, errors occur (primarily in Firefox) that disrupt client-side navigation. This seems to stem from Lenis overriding the native scroll behavior and manually updating the window.scroll values, which Astro’s router listens to for scroll restoration.

The problem arises because Lenis triggers frequent updates via requestAnimationFrame, causing Astro to save the scroll position in history excessively.

Observed Errors

Console errors in Firefox :

Warning in Chrome :

Steps to Reproduce

Integrate the component in an Astro project.
Add Lenis for smooth scrolling.
Attempt client-side navigation while observing console outputs.

Additional Notes

This seems to be related to the interaction between Lenis’ frequent requestAnimationFrame updates and Astro’s scroll restoration mechanism.
Potential workarounds or guidance for compatibility adjustments would be appreciated.

What's the expected result?

Client navigation should work seamlessly, and the integration of Lenis should not interfere with Astro's scroll restoration or produce errors in the console.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-bsnbbzh2?file=src%2Flayouts%2FLayout.astro

[titouan-pellerin]

I believe the issue stems from the scrollend event being fired too frequently. A simple workaround is to remove it from the window, which forces Astro's router to fall back on its interval-based method for tracking scroll positions.

Here's the fix:

<script is:inline>
	delete window.onscrollend;
</script>

Please note, this is a bit of a hacky solution, but it might help in this case.

For reference, here’s the relevant section of Astro’s router code: router.ts.

Hope this helps!

[martrapp]

Hi @titouan-pellerin 👋🏼 Thank you so much for opening this issue!
We often have questions on the Astro discord about problems with ViewTransitions and Lenis and where never able to nail them down. Mostly it was: You have to choose between view transitions and lenis.

If available, scrollend is preferred over scroll events in Astro for performance reasons and smoother animation. Its a bit ironic that falling back to scroll events is the solution here, and it might not be the right choice for every case. But I'm happy about a solution that is better than "all or nothing".
The mentioned trick might well help others to deal with the situation!

I have to admit that I still do not understand how Lenis can trigger too many scrollend events.
Can you share more details from your analysis?

[titouan-pellerin]

Hi @martrapp, glad to help! Honestly, I’m not entirely sure how Lenis works internally. However, I’ve noticed that the browser detects a scrollend event after every scroll event when using Lenis. I’m not sure if there’s anything Lenis can do about it, but still, I’ve opened an issue on their side.

[martrapp]

You don’t always have to understand everything. In any case, thanks again.
This will definitely help a lot of people who come across this question here! ;-)