svg background flickers on css-animated element

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.

  • Microsoft Edge Team

    Changed Status from “Confirmed” to “Won’t fix”

    Changed Status from “Won’t fix”

  • Reactivating auto-resolved valid bugs reported by web dev community. Those were not expected to be resolved. We apologize for any inconvenience!

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

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

Sign in