Debugging layout repaint issues triggered by CSS Transition

This content originally appeared on Bram.us and was authored by Bramus!

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 →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-02-18T22:18:37+00:00) Debugging layout repaint issues triggered by CSS Transition. Retrieved from https://www.scien.cx/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition/

MLA

" » Debugging layout repaint issues triggered by CSS Transition." Bramus! | Sciencx - Thursday February 18, 2021, https://www.scien.cx/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition/

HARVARD

Bramus! | Sciencx Thursday February 18, 2021 » Debugging layout repaint issues triggered by CSS Transition., viewed ,<https://www.scien.cx/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition/>

VANCOUVER

Bramus! | Sciencx - » Debugging layout repaint issues triggered by CSS Transition. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition/

CHICAGO

" » Debugging layout repaint issues triggered by CSS Transition." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition/

IEEE

" » Debugging layout repaint issues triggered by CSS Transition." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition/. [Accessed: ]

rf:citation

» Debugging layout repaint issues triggered by CSS Transition | Bramus! | Sciencx | https://www.scien.cx/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.