Animation freezes on FF an IE but not Chrome

Question

I have a loading spinner animation in my application that keeps freezing in FF and IE when it does heavy js-execution, but is running fine in chrome when heavy js-execution is going on.

I've made a plunker to demonstrate this problem. I made three different because of different performance on the different browsers. The only difference between them is the number of items repeated over. Not sure if it is dependant on the computer as well, in that case maybe you can change the number of items to get a small performance hit.

In this Chrome version the spinner animation keeps spinning when I repopulate the list even though you can see it takes a while before the ng-repeat is updated.

In this FireFox version and IE version the spinner halts in its animation while the list is being repopulated.

the css:

.spinner-container {
  position: absolute;
  top: 40%;
  left: 50%;
}

#preloader {
  margin: 0 auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid red;
  border-right: 1.1em solid red;
  border-bottom: 1.1em solid red;
  border-left: 1.1em solid green;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
#preloader,
#preloader:after {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Does anyone know why this is and maybe a solution for it?

Of course we will try and refactor the "heavy js-execution" but that will probably take a while and it would be nice have a proper loading spinner at once.

thanks

You might be able to force hardware acceleration in order to off-set the JS execution, however that may end up effecting overall performance since their will be extra power going to rendering CSS and the JS in background. http://davidwalsh.name/translate3d — mcclaskiem, Sep 21 '15 at 14:28
I see that you have the -webkit prefix for Chrome, Have you try to use the -moz and the -ms prefix for animation, transform and keyframes? — Juan C. V., Sep 21 '15 at 14:32
@JuanC.V. just tried that in the plunkers, had no effect. they still freeze — Gustav, Sep 21 '15 at 14:36
@mcclaskiem I already use transform to rotate. Is there a way to use rotate and translate3d together? — Gustav, Sep 21 '15 at 14:38
@Gustav if you are using pure css3 you could simple pass multiple in the transform property as listed in this SO post. http://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css3 I would highly suggest looking into using Sass if possible. I use bourbon.io which allows me to write the it as so: `@include transform(rotate(45deg) translateY(-50%));` This also handle all prefixing for -webkit- and -moz- inside of the mxin. Let me know if that helps — mcclaskiem, Sep 21 '15 at 14:50
@mcclaskiem it does not seem to work. If I add `translate3d(0,0,0);` after rotate, if that was what you suggested? — Gustav, Sep 21 '15 at 15:04
you would want to write like this in your keyframe: `transform: rotate(0deg) translate3d(0,0,0);` are you not seeing the styling applied? or is there no difference in the animation after adding it? — mcclaskiem, Sep 21 '15 at 15:12
exaclty what I did. And there was no difference in the animation.. — Gustav, Sep 21 '15 at 15:18
Try using `transform: translateZ(0);` instead of the translate3d. The idea here is that whenever the browser sees that a 3D transform is being used it then off loads that animation to the computers GPU. Any sort of 3D transform should trigger this. — mcclaskiem, Sep 21 '15 at 15:56

score 3 · Accepted Answer · answered Sep 21 '15 at 16:56

3

This is the expected behaviour, that's the way how browsers do rendering within single thread. Chrome (Webkit browsers, to be precise) differs in this way, that's the reason they are usually called 'fast' and 'responsive'. This article sums this up.

You may want to delegate CPU-intensive tasks to web worker.

answered Sep 21 '15 at 16:56

Estus Flask

206,104
70
425
565

Allright then, changing the code it is. It seems css animations in a different thread is in the works for the other browsers but not there just yet – Gustav Sep 22 '15 at 06:49

Animation freezes on FF an IE but not Chrome

1 Answers1