CODEWITHSUNDEEP
javascriptangularjscsscross-browsercss-animations
Gustav
Gustav

Reputation: 3586

Animation freezes on FF an IE but not Chrome

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

Upvotes: 2

Views: 1233

Answers (1)

Estus Flask
Estus Flask

Reputation: 222865

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.

Upvotes: 3

Related Questions