Steps to reproduce
Open attached .html file in Edge.
Click button on page to observe background svg image flicker during css animation.
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.