Mobile Safari and CSS Transitions of Multiple Elements are Lagging

Question

I have a website in which I perform transitions of multiple DIVs with image backgrounds, from one CSS class to another (using jQuery's addClass and removeClass).

.class1 {
  height: 30px;
  width: 50px;
  top: 30px;
  left: 10px;
}

.class2 {
  height: 50px;
  width: 70px;
  top: 50px;
  left: 80px;
}

.fade {
    -webkit-transition: opacity 0.6s linear, -webkit-transform 5s linear, width 5s linear, height 5s linear;
    -moz-transition: opacity 0.6s linear, background-size 5s linear;
    -ms-transition: opacity 0.6s linear, background-size 5s linear;
    -o-transition: opacity 0.6s linear, background-size 5s linear;
    transition: opacity 0.6s linear, background-size 5s linear;
    -webkit-backface-visibility: hidden;
} 

All DIVs are initialized (when page is loaded) with the fade class.

Now, when animating one DIV, on Mobile Safari, everything works smoothly. However, when animating more than one element simultaneously, Mobile Safari lags horribly. Obviously, this works just fine on regular browsers such as Chrome.

Methods I've tried for resolving this:

• Using translate3d and scale3d CSS properties
• Using jQuery's animate
• Using jQueryUI's switchClass
• Using IMG tags instead of DIV with background images

Any help will be much appreciated,

Thanks

Answer 1

OK, I've managed to find out what was causing this issue: The fade class is applied to many inner DIVs within the main DIVs, and I needed that effect only for certain transitions, which do not include this resize transition (for this, I have another CSS class).

So, right before applying the transition, I call removeClass('fade'), and when ending the transition, I add it once again.