Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flickering CSS animation on IE only

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 ?

like image 857
Doc Flandersao Avatar asked Oct 31 '22 23:10

Doc Flandersao


1 Answers

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.

like image 98
Paul Sweatte Avatar answered Nov 09 '22 09:11

Paul Sweatte