Steps to reproduce
Synopsis: When a ::before or ::after psuedo-element has an animated gif background, then the gif animation timer keeps firing even once the pseudo is gone. This causes the parent element to be continually repainted until it (the parent element) is removed.
- Open the attached example.
- Open devtools.
- Start profiling.
- Wait a few seconds.
- Stop profiling.
You will see a continuous stream of paint events on the root, without any obvious cause.
In the demo, the body element has a “loading” class assigned to it that displays an animated spinner gif in the background of a ::before pseudo element. One second after the page is loaded, the loading class is removed from the body element.
If the parent element is large and / or complex, these repaints can easily max out a CPU core. Not great for performance and battery life.
Note: I would have tracked down the cause of this about 1000x quicker if the devtools provided any useful information about what triggered a repaint, e.g. “Repaint triggered by animated gif timer “spinner.gif” on element: body”
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Brad E.”
Changed Assigned To to “Rico M.”
Changed Assigned To from “Rico M.” to “Rafael C.”
Changed Status to “Confirmed”