title: Mobile Safari and CSS Transitions of Multiple Elements are Lagging
body: <p>I have a website in which I perform transitions of multiple <code>DIVs</code> with image backgrounds, from one CSS class to another (using jQuery's <code>addClass</code> and <code>removeClass</code>).</p>
  
  <pre><code>.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;
  } 
  </code></pre>
  
  <p>All <code>DIVs</code> are initialized (when page is loaded) with the <code>fade</code> class.</p>
  
  <p>Now, when animating one <code>DIV</code>, on Mobile Safari, everything works smoothly.
  However, when animating more than one element <strong>simultaneously</strong>, Mobile Safari <em>lags horribly</em>.
  Obviously, this works just fine on regular browsers such as Chrome.</p>
  
  <p>Methods I've tried for resolving this:</p>
  
  <ul>
  <li>Using <code>translate3d</code> and <code>scale3d</code> CSS properties</li>
  <li>Using jQuery's <code>animate</code></li>
  <li>Using jQueryUI's <code>switchClass</code></li>
  <li>Using <code>IMG</code> tags instead of <code>DIV</code> with background images</li>
  </ul>
  
  <p>Any help will be much appreciated,</p>
  
  <p>Thanks</p>