#URL not changing while using View Transitions

22 messages · Page 1 of 1 (latest)

glad igloo
#

So apparently I'm not able to debug out why the URL is not changing when I move from one page to another using View Transitions, also I'm using a script to Scroll to top manually because apparently the scroll position is also failing to do this automatically as I navigate from one project to another. I've used the VTBot to solve this and I'm still not able to figure out why this is happening.

As you can see in the logs (Attached picture), in the before-swap event you can see that I'm navigating from 'coya-restaurant- to 'lacoste' but after the swap the URL didn't change, it only updated the DOM with the new project. You can also see that the updated scrollPosition is not the desired as it should send me to the top of the page everytime I navigate to another project.

Take a look at the live demo in https://www.lowton.tv/

image.png
Lowton Advertising
Lowton Advertising

Experts in mixing the rational and the emotional to offer the most innovative and imaginative solutions to help your brand grow.

opal sand
glad igloo
#

Hey Martin! Here's a screen record so you can see what I meant before

#

Also that 'Scroll to top' is actually a script I made to always scroll to top when I navigate to a new project, but as you can see in the video, it doesn't work 'always'.

#

If I delete that script, then everytime I navigate to another project the scroll position will be in the same position as you can see in the end of the video

opal sand
#

what browser do you use? any special plugins?

glad igloo
opal sand
#

ah, could just reproduce it with firefox.

opal sand
#

It is still hard to reproduce for me. When I can reproduce it on Firefox, it always has a console full of errors, complaining about insecure or too frequent calls to history functions:

#

These errors are a good explanation why the address bar does not change. And for sure, they are too frequent.

#

What i do not understand: Astro uses scrollend eventhandlers that should not trigger too often.

opal sand
#

Do you also get those errors in the console when the address bar does not change?

opal sand
#

Either something damaged the scrollend detection of the browser, or there are multiple instances of the same external module script active. Both sound very unlikely. Or another library is involved.

In Astro's router code I found this comment:

// Create bound versions of pushState/replaceState so that Partytown doesn't hijack them,
// which breaks Firefox.

Do you use partytown for anything else than googletags? Do you use it on embedded iframes? Do you embed Astro pages that also use view transitions via iframes?

glad igloo
#

I didn't get those logs on Brave/Chrome but now I can see them in Firefox. And yes! I'm using Partytown but not on any iframe. I realised the issue was the Lenis smooth scroll library, it was causing too many calls to history functions.

image.png
#

Disabling that script will fix the issue

#

Thank you again for your help @opal sand !

opal sand
#

Happy to see you found a solution!

If your issue is resolved, please consider doing the following:

  • From the ellipses in the top-right corner of the post (not the message), edit the tags to include the Solved tag
  • From the same ellipses, select Close Post. Your post will still be available to search and can be re-opened simply by replying in it. It will just be moved down with older posts, so we can more easily focus on issues that still need to be resoled.
    Thank you.
#

@rich fjord is there a /command to add 👆 this?

rich fjord