svg background flickers on css-animated element

Confirmed Issue #10440554 • Assigned to Bogdan B.


Hans M.
Jan 6, 2017
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Open attached .html file in Edge.

Click button on page to observe background svg image flicker during css animation.


1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Christian F.”

    Changed Assigned To to “Bogdan B.”

    Changed Status to “Confirmed”

  • The problem is that when you resize the element, you also force to rerender the svg. Edge renders the svg as image asynchronously; in this case it doesn’t work well because the size keeps changing so we keep missing frames.


    I don’t expect us to change our design here anytime soon, but having the bug filed is helpful anyway, we will keep tracking impact and prioritize accordingly.


    As a workaround, you can use the background on an element inside your button whose size does not change over time so to not retrigger the svg paining code every frame of your animation (it is not necessary in your case). I noticed the image keeps moving up and down a pixel in Chrome on my PC, probably for that reason.

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

Sign in