title: Modal backdrop with opacity causing google chrome to lag
body: <p>We have a simple modal in our web application.</p>
  
  <p>It's nothing special and is built on twitters bootstrap library.<br>
  It contains a backdrop that is a semi transparent white background with <code>position: fixed</code> and <code>width</code> and <code>height</code> set to <code>100%</code>.</p>
  
  <p>The modal itself, however, is not statically positioned but absolutely positioned, this is because the modal might be taller than the viewport and we don't want scrolling in the modal.</p>
  
  <p>Here's the dilemma, when the backdrop is present the scrolling is far from smooth in Google Chrome, if I change the position of the backdrop to absolute everything is fine.<br>
  This has the obvious downside of not covering the entire page.</p>
  
  <p>I tried to reproduce it with a JSFiddle but I couldn't (most likely due to the fact that we a lot more content on our site).<br>
  Nonetheless here is my attempt: <a href="http://jsfiddle.net/LdC4w/" rel="nofollow">http://jsfiddle.net/LdC4w/</a></p>
  
  <p>So, any ideas?</p>
  
  <p>Oh, and I can add that having a background image instead of opacity is not an option.</p>