title: CSS3 transition problem on iOS devices
body: <p>I'm trying out some webkit transitions on a site and have come across a problem on iOS devices. I have six images being given a random rotation every second. The transition works fine for five out of the six images but for some reason when using the iPad or the iPhone the sixth image disappears during the transition.</p>
  
  <p>You can view the example <a href="http://apptest.massconvention.com/netMon/index.html" rel="nofollow">HERE</a>.</p>
  
  <p>CSS:</p>
  
  <pre><code>.b1_needle {
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s ease-out;
      transition: transform 0.15s linear;
  }
  
  .b2_needle {
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s ease-out;
      transition: transform 0.15s linear;
  }
  
  .m1_needle {
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s ease-out;
      transition: transform 0.15s linear;
  }
  
  .m2_needle {
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s ease-out;
      transition: transform 0.15s linear;
  }
  
  .s1_needle {
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-transform: rotate(0deg);
      position: relative;
      top: 6px;
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s ease-out;
      transition: transform 0.15s linear;
  }
  
  .s2_needle {
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-transform: rotate(0deg);
      position: relative;
      top: 7px;
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s ease-out;
      transition: transform 0.15s linear;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var ranNum;
  
  function randomFromTo(from, to){
      ranNum = Math.floor(Math.random() * (to - from + 1) + from);
      ranNum = ranNum + "deg";
      return ranNum;
  }
  
  setInterval(function newNum(){
      document.getElementById("needle_b1").style.webkitTransform = "rotate("+randomFromTo(0,293)+")";
      document.getElementById("needle_b2").style.webkitTransform = "rotate("+randomFromTo(0,285)+")";
      document.getElementById("needle_m1").style.webkitTransform = "rotate("+randomFromTo(0,314)+")";
      document.getElementById("needle_m2").style.webkitTransform = "rotate("+randomFromTo(0,223)+")";
      document.getElementById("needle_s1").style.webkitTransform = "rotate("+randomFromTo(0,130)+")";
      document.getElementById("needle_s2").style.webkitTransform = "rotate("+randomFromTo(0,95)+")";
  }, 2000);
  </code></pre>
  
  <p>I originally thought it was a memory issue but removing the transition from all but that one image doesn't make a difference. Any ideas for why this is would be happening?</p>