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.
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"
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.
There are 2 issues:
-
Repaint on Box Solution:
- Add
will-change: transform
on the box class, docs
- Add
-
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 addtransform: translateZ(0)
. Credit: @pveyes on twitter for this - Add
position: relative
andz-index: 1
to the box class
The goal is to make the Box's layer in higher layer than the Hello div(s)
- Remove
- 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.