title: position: fixed , has a very bad performance on mobile/tablet devices when scrolling
body: <p>I'm using <code>position: fixed</code> in my site to fix the navigation bar in the view port, just like facebook's blue bar, but when we tried it on mobile/tablet devices (with their low processing powers) this fixed-bar makes a very bad hit on performance, which makes a very bad user experience when scrolling,</p>
  
  <p>we used a very good articles to enhance the scrolling, and indeed they did, like:</p>
  
  <ul>
  <li><a href="http://www.html5rocks.com/en/tutorials/speed/scrolling/">http://www.html5rocks.com/en/tutorials/speed/scrolling/</a></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/">http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/</a></li>
  <li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html">https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html</a></li>
  </ul>
  
  <p>After a lot of modifications based on these articles, we reached to the point where <code>position: fixed</code> is the only investigation left for us to enhance in. </p>
  
  <p>The site has an ultra-smooth scrolling when we change it to <code>position: absolute</code>. But with fixing it, the scrolling has a very bad drawback to the extent that it could hang the safari browser on ipad when scrolling in a certain way, <strong>did you know how to use <code>position: fixed</code> with a good performance on tablet/mobile devices?</strong></p>