decoding=async can break multipage view transitions

Turns 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 that point, the snapshot is taken before the image is painted, resulting in a broken or missing image during the transition animation.

Use decoding="auto" (or sync) for images with a view-transition-name.

Published on

Reactions
Likes3
Bag of Tricks for View TransitionsKainoaThis Is Done By Humans
Boosts0

Join the conversation on Bluesky and LinkedIn