Visual glitch at the end of router View Transition

[luxalpa]

When using leptos_router's view transition, for example by running the example in /examples/router, there's a glitch towards the end of the view transition where for a frame or two it jumps back to the start of the transition before it ends, creating this very jarring flicker on my 120 Hz screen. I don't know if this is visible on 60Hz.

Leptos Dependencies

Using just the leptos repo at bbf5bf9

To Reproduce
Run the example at /examples/router

Screenshots
I hope it was clear what I meant from the description. Making a good video from this is difficult, but I could spend the work if it's really needed.

Next Steps

• I will make a PR
• I would like to make a PR, but need help getting started
• I want someone else to take the time to fix this
• This is a low priority for me and is just shared for your information

[luxalpa]

Interestingly, this problem appears in Chrome, but not in the new Firefox.

[gbj]

Sorry for my slow response! I have been kind of inundated with notifications recently and it's been hard to keep up. My initial thought when seeing this was "Huh, I don't think we do anything interesting" — if I recall correctly the router implementation literally just wraps a startViewTransition() call around the navigation process, when supported. So I had wondered if it was a browser issue. And also I know the router itself is quite complex so it wouldn't be surprising if we were doing something that caused Chrome to trip itself up when it wouldn't normally.

Prompted by your note about Firefox, I just tested Safari and it handles the transitions correctly with no glitch. So I wonder whether this is actually a Chrome issue?

[luxalpa]

I would have tested this some more, but I found out that view transitions actually suck for single page apps (they block interactivity with the entire site during the transition).