Gif animation timer for pseudo-element backgrounds keep running after the pseudo is gone

Confirmed Issue #8531780 • Assigned to Rafael C.


Jon R.
Aug 18, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

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.

  1. Open the attached example.
  2. Open devtools.
  3. Start profiling.
  4. Wait a few seconds.
  5. 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.

The bug supersedes

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”

You need to sign in to your Microsoft account to add a comment.

Sign in