title: How to fix lags on webkit/iphone when using transform rotate in radial progress bar
body: <p>I am using this radial progress bar: <a href="http://jsfiddle.net/andsens/mLA7X/" rel="nofollow noreferrer">http://jsfiddle.net/andsens/mLA7X/</a>
  It uses transform: rotate(); to visually display a percentage (e.g. 80%).</p>
  
  <p>It works like a charm in chrome and FF, however it seems to 'lag' in webkit (e.g. my iPhone, see pictures below). I've tried to following to fix the lag:</p>
  
  <p><code>.mask, .fill {-webkit-backface-visibility: hidden;}</code></p>
  
  <p>however, it doesn't seem to work. This was the only advice I could find on this issue, that's why I am now asking SO. I hope you guys can help.</p>
  
  <p><a href="https://i.stack.imgur.com/5vlkz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5vlkz.png" alt="Initial state"></a> Initial state</p>
  
  <p><a href="https://i.stack.imgur.com/sYtXU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sYtXU.png" alt="showing lag during transition to final state"></a> Showing lag during transition to final state</p>
  
  <p><a href="https://i.stack.imgur.com/UOKtY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UOKtY.png" alt="Final stage"></a> Final stage. No problems.</p>
  
  <p>Feel free to check-out the lag yourself. (It appears when loading bigger percentages (>60%).)</p>