Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap!

Piccalilli's resource offers insights, tutorials, and resources for frontend developers and web designers. Readers can learn about HTML, CSS, and JavaScript techniques, as well as design principles and accessibility. With articles, tutorials, and design showcases, Piccalilli provides  guidance and inspiration for creating modern and accessible web experiences.

Piccalilli

View transitions can blink or flash when the browser fails to correlate elements between old and new states. This happens when view-transition-name properties are missing, duplicated, or assigned at the wrong time. The solution requires assigning unique view-transition-name values before transitions start, performing true DOM manipulation instead of CSS visibility toggles, and cleaning up transition names after completion. A tabbed interface example demonstrates the broken pattern (using opacity to hide panels) versus the working solution (removing and creating DOM elements). Key principles include ensuring unique transition names, manipulating the DOM directly, using dynamic naming for conditional elements, and maintaining proper timing throughout the transition lifecycle.

Why are my view transitions blinking?

Universal principles for smooth transitions