title: How to fix iOS Viewport Bug(s)?
body: <p>Imagine the following setup:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=yes, width=640" /&gt;
  </code></pre>
  
  <p>Default CSS:</p>
  
  <pre><code>body { width: 100%; }
  </code></pre>
  
  <p>CSS change on some element (let's call it <code>button-X</code>) click:</p>
  
  <pre><code>body { 
      margin: 0 0 0 -webkit-calc(100% - 100px);
      min-width: 640px; 
      overflow-x: hidden; 
  }
  </code></pre>
  
  <p><strong>What does this do in desktop browser?</strong></p>
  
  <p>It shifts entire body almost 100% to the right. Horizontal scrollbar doesn't appear. You only see left part (100px) of the <code>body</code> positioned to the very right of your screen.</p>
  
  <p><strong>What does this do in iPhone 4S iOS 6.0.1?</strong></p>
  
  <p>There are two behaviors actually:</p>
  
  <ol>
  <li><strong>INCORRECT:</strong> If you just run Safari and click <code>button-X</code> it will start displaying your website at like 1200px instead of 640px.... shifted <code>body</code> will make entire <code>viewport</code> have 630px of blank space + body width = ~1200px. Even if <code>body</code> has <code>position: absolute;</code> or <code>position: fixed;</code> which in theory should allow positioning elements outside viewport but it doesn't. iOS makes viewport so large that your elements that are supposed to be off the screen are on the screen.</li>
  <li><strong>CORRECT:</strong> I wouldn't ask this question because maybe that's how it works and it can't be changed BUT there is fix for that so I assume it's a bug of iOS. If I run Safari and I tap it with 2 fingers and move them together (like to zoom out) and then click <code>button-X</code> it works perfectly. This action of tapping with two fingers doesn't change anything to viewport. Since viewport is set to 640px it will remain 640px after releasing fingers so literary nothing changes... but it starts working perfectly fine after this simple action.</li>
  </ol>
  
  <p>The question is - how to perform this action (2) programmatically? I've tried:</p>
  
  <ol>
  <li><code>jQuery(window).trigger('resize');</code></li>
  <li><code>-webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;</code></li>
  <li><a href="https://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon">How do I reset the scale/zoom of a web app on an orientation change on the iPhone?</a></li>
  <li>Interesting: it will make viewport ~1200px even if you set <code>user-scalable: no</code></li>
  </ol>
  
  <p>This didn't change anything. Basically I want absolutely positioned elements (or with <code>overflow: hidden;</code>) to be off the viewport like in desktop browsers.</p>