Debugging layout repaint issues triggered by CSS Transition
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
spanwrapping some text placed inside an
h1itself 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
spanand causing repaint on the whole page.
The culprit: Stacking Contexts