I have following code running fine on modern browsers, except IE11 :
A simple pseudo-element animated to rotate indefinitely.
@keyframes spin{
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin{
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin{
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.spin-container{
position: relative;
width: 400px;
height: 300px;
margin: 2em auto;
box-sizing: border-box;
}
.spin-container::after{
content: "";
position: absolute;
display: block;
opacity: 1;
border-color: rgba(0, 0, 0, 0.2) green green rgba(0, 0, 0, 0.2);
border-radius: 100%;
border-style: solid;
border-width: 10px;
width: 100px;
height: 100px;
bottom: 50px;
right: calc(50% - 50px);
border-radius: 100%;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
<div class="spin-container"></div>
I've been looking for a reason for weeks now, and I cannot determinate a property that can cause this.
I first suspected a transform-origin to not be the center of my pseudo-element spinner, but it appears that default value is 50% 50% 0
for every browser.
Then I looked into z-axis modification, or crazy inheritance, but I definitely found nothing.
Does anyone know why this flickers on IE11, and not on other browsers ?
IE11 has some issues related to hardware acceleration and CSS animation:
IE 11 Leaving Artifacts and not redrawing screen
CSS Transition Property not working for SVG Elements
Microsoft is only fixing security related issues in IE11, so this will most likely remain unfixed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With