PHPnews.io

Debugging layout repaint issues triggered by CSS Transition

Written by Bram.us / Original link on Feb. 18, 2021

https://www.bram.us/wordpress/wp-content/uploads/2021/02/css-transition-repaint-issue.mp4

Dzhavat ran into an interesting performance issue where practically his whole site would repaint when a transition in the header was triggered.

The element being animated is a span wrapping some text placed inside an h1. The h1 itself is in the upper left corner on the page and contains my name. Initially, only the letter “D” is shows. The remaining part fades-in on hover.

I was quite surprised to see the whole page flashing green given the transition was scoped to a very isolated element. I didn’t really see any connection between animating a span and causing repaint on the whole page.

The culprit: Stacking Contexts

Debugging layout repaint issues triggered by CSS Transition →

bram tutorialzine link painting ircmaxell bram

« GitHub Skyline — Your GitHub Story in 3D - Understanding z-index (and Stacking Contexts) in CSS »