Post

Bag of Tricks for View Transitions
@vtbag.dev

It is even more dynamic: the ::view-transition-new pseudo is not a screenshot but displays the image _while_ it is loading. You could avoid a broken appearance by pausing the view transition animations right at the start, while only the old image is visible, and waiting for the new image to load...

Michaël Vanderheyden@th3s4mur41.me

Turns out optimizing for performance can actually harm user experience… Did you know that decoding="async" can break multipage View Transitions? #CSS #HTML #UX #WebDev

th3s4mur41.medecoding=async can break multipage view transitionsTurns out optimizing for performance can actually harm user experience... Did you know that decoding "async" can break multipage View Transitions? When a view transition is triggered, the browser captures a snapshot of the new page to animate from. If an image is still decoding asynchronously at tha...

0 reposts1 like

Bag of Tricks for View Transitions
@vtbag.dev

...before resuming the animations, with a complete new image. But that blocks the UI for several more frames. And you added "async" precisely to avoid blocking, did you not? If possible, it is better to preload the image before starting the view transition.