title: Considerations for CSS3 Transition Performance
body: <p>As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change.</p>
  
  <p>When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery animation, but not much.</p>
  
  <p>I've set up two test pages to demonstrate what I mean (the difference is hardly noticeable in a regular browser):</p>
  
  <p>Toggle Control on its own > <a href="http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html" rel="noreferrer">http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html</a></p>
  
  <p>Combined with other elements > <a href="http://ben-major.co.uk/labs/iPhone%20UI/" rel="noreferrer">http://ben-major.co.uk/labs/iPhone%20UI/</a></p>
  
  <p>I am looking for any advice on speeding up the transition in mobile devices. What could be the factors that are slowing down its performance on the full page test? </p>
  
  <p>Any advice and comments welcome.</p>