quiz-repaint-1.md

What

Open https://codesandbox.io/s/aloha-css-uyox7.

The app has an animating Box and "Hello" divs, however we got unexpected repaints over and over, and somehow the idle "hello" div also got repainted.

Debug

You can debug this issue by using Chrome Layers tab, you can see each element layering. You can enable flashing indicator by opening Chrome Rendering tab, and check "Paint flashing"

Why

New stacking context due to transform and position: relative usage. Because of this, the box's layer is now lower than the Hello3 and Hello4. If the lower one repaints, then the higher one must repaint too.

Solution

There are 2 issues:

1. Repaint on Box Solution:

   • Add will-change: transform on the box class, docs

2. Repaint on div Hello3 and Hello4 Pick one of these for solution, depending on your use case (e.g.: need to keep position:relative):

   • Remove position: relative on div.Hello3 and div.Hello4, or add transform: translateZ(0). Credit: @pveyes on twitter for this
   • Add position: relative and z-index: 1 to the box class

   The goal is to make the Box's layer in higher layer than the Hello div(s)

Recommendation

• Try to use CSS keyframe for animation when possible, you won't face this issue if you're using css keyframe :D. However you might need JS for some reasons, so it's good to know.

Resources

https://dzhavat.github.io/2021/02/18/debugging-layout-repaint-issues-triggered-by-css-transition.html