<ViewTransitions /> introduces .5s laggy tick | Astro Lounge | Page 1

feral coyote Dec 12, 2023, 9:12 AM

#

The lag is most apparent on mobile phones (tested on iPhone 15 Pro Max) when scrolling on Safari mobile. Also present when scrolling fast on desktop browsers (Mac Pro M2) you can suddenly go over the page boundaries and then glitch out back in.

Introducing <ViewTransitions /> to my layout (or any page that has it) introduces a 0.5 second tick of lag on the page. Seems to have something to do with scroll restoration if I could guess.

No View Transitions tag: https://portfolio-2024-d4p52tzhz-fredericoo.vercel.app
With View Transitions tag: https://portfolio-2024-xzc7lqvjw-fredericoo.vercel.app/

#

Found a relevant unresolved issue after digging around; it’s from September: https://github.com/withastro/astro/issues/8625

GitHub

Stutter scrolling on iOS Safari 17 · Issue #8625 · withastro/astro

Astro Info Astro v3.1.2 Node v18.17.1 System macOS (arm64) Package Manager npm Output static Adapter none Integrations @astrojs/mdx @astrojs/sitemap @astrojs/tailwind If this issue only occurs in o...

feral coyote Dec 12, 2023, 1:06 PM

#

Yep it seems to be updateScrollPosition being called on every scrolled frame. I traced a flame graph and it spiked

outer sedge Dec 12, 2023, 9:31 PM

#

Does it still happen with fallback swap? There are a few issues like this I've noticed where swap helped on non Chrome/Edge browsers

#<ViewTransitions /> introduces .5s laggy tick