In this particular div, I have two spans enclosed. I've created a loader which features a circle filling up with red color repeatedly. While everything appears to be functioning smoothly in Google Chrome, there's a noticeable glitch when it comes to Edge browser. When I examine the code on EDGE, I notice that various elements such as span, transform, and animation are all struck through. However, according to Can I Use, all browsers should be compatible. Is there a specific prefix or workaround that can resolve this issue on Edge? I attempted to include a compatibility meta tag in the HEAD section, but unfortunately, it didn't resolve the problem.
HTML
<section>
<div><span></span><span></span></div>
</section>
CSS
@-webkit-keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
...
}
...