Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Throws Error with Astro View Transitions in Firefox #348

Closed
JoyBoy-369 opened this issue Jun 6, 2024 · 7 comments
Closed

Throws Error with Astro View Transitions in Firefox #348

JoyBoy-369 opened this issue Jun 6, 2024 · 7 comments

Comments

@JoyBoy-369
Copy link

JoyBoy-369 commented Jun 6, 2024

When I use lenis with astro and enable view-transitions I get the following errors in the browser console after scrolling a couple of times :

Too many calls to Location or History APIs within a short timeframe. router.js:8:17

Uncaught DOMException: The operation is insecure.
updateScrollPosition router.js:8
onScrollEnd router.js:409
EventListener.handleEvent* router.js:418
router.js:8
updateScrollPosition router.js:8
onScrollEnd router.js:409
(Async: EventListener.handleEvent)
router.js:418

However, this does not seem to be the case when view transitions is disabled and works fine in safari and chrome
I am using lenis astro and gsap.
<script>
   		import gsap from 'gsap'
   		import Lenis from 'lenis'
   		import ScrollTrigger from 'gsap/ScrollTrigger'
   		import Flip from 'gsap/Flip'
   		window.gsap = gsap

   		gsap.registerPlugin(ScrollTrigger, Flip)

   		const lenis = new Lenis({
   			smoothWheel: true,
   			syncTouch: true,
   			duration: 1.2,
   			infinite: false,
   			easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
   		})

   		lenis.on('scroll', ScrollTrigger.update)
   		gsap.ticker.add((time) => {
   			lenis.raf(time * 1000)
   		})

   		gsap.ticker.lagSmoothing(0)
   	</script>

Minimal Repo

@JoyBoy-369 JoyBoy-369 changed the title Throws Error with Astro View Transitions Throws Error with Astro View Transitions on Firefox Jun 6, 2024
@JoyBoy-369 JoyBoy-369 changed the title Throws Error with Astro View Transitions on Firefox Throws Error with Astro View Transitions in Firefox Jun 6, 2024
@clementroche
Copy link
Member

clementroche commented Jun 6, 2024

Do you have the same error if you remove Lenis ? It doesn't seems to be related with Lenis at all.

@JoyBoy-369
Copy link
Author

@clementroche Nope. I don't get the same error if I remove Lenis. I have put a minimal repo too if you would like to test it out. There is no error if I remove View Transitions too. There seems to be some issue with astro's View Transition but only in firefox

@clementroche
Copy link
Member

clementroche commented Jun 7, 2024

I can't reproduce your issue using your link on Firefox. Lenis doesn't deal with history or location at all so it might come from your implementation.

livewire/livewire#7746

@JoyBoy-369
Copy link
Author

This seems to be in regard to the Astro's View Transition, not Lenis per say. So I should ask the folk at astro for this issue?

@clementroche
Copy link
Member

I think so

@clementroche
Copy link
Member

I'm closing this issue for lack of activity reasons

@titouan-pellerin
Copy link

titouan-pellerin commented Dec 12, 2024

Hi there,

The issue seems to be caused by the scrollend event being fired too frequently by Lenis. I'm not sure if this is something that can be addressed on Lenis's side, but there is a simple (albeit dirty) workaround.

For more details, please refer to this related issue on the Astro repository: Issue on Astro repo.

Link to minimal reproduction of the issue

Hope this helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants