SVG flashes on mouse hover

[liangfengning]

My browser is Microsoft Edge Dev, Version 85.0.552.1 (Official internal version) dev (64-bit).

The demo page is here： https://codepen.io/Lifeni/pen/MWKQRzR ,On the left is the bug button.

The specific performance is that when the mouse moves to the button on the left, the svg picture keeps flashing.

The code in question includes one of the following characteristics:
1. svg is written in the "background" of css, you can see this website: https://stackoverflow.com/questions/10768451/inline-svg-in-css.
2. The css variable is used to store the svg data (I think this is the most important point, because the picture on the right is normal, and the css variable is not used).
3. The element where the svg is located has an attribute in :hover, :active, :focus.

This problem does not appear in chrome and firefox, nor does this problem in the edge android version. I only have one computer, so I’m not sure if it’s just me.

(My native language is not English, I translated it by machine, if you have any questions, you can reply to me.)

 

[#2]

@liangfengning 

Please make sure to send a feedback through feedback option in Microsoft Edge.

Does it happen in stable build (not Dev) of Microsoft Edge?

[#3]

@Reza_Ameri-Archived 

Thank you for your reply.

I just tried it, the stable version of the Edge does not have this problem.

I tried Chrome Dev by the way, and did not find this problem.

[#4]

@liangfengning Dev is like beta and errors and bug are expected and it is still under testing.

When you use Dev , make sure report all issues through feedback and you may switch to stable release for normal work and to Dev for testing, evaluation and check upcoming features.