title: iOS7 Safari layout breaks on orientation change if input is focused
body: <p>It seems that there is a fundamental breakage in iOS7 iphone/ipad and possibly/likely other versions.</p>
  
  <p>If you focus on an input field so that the keyboard is open, the layout breaks in a terrible and irrecoverable way on orientation change. It has nothing to do with css I only added it so that the problem can be seen clearer.</p>
  
  <p>Changing the orientation back fixes the layout but I can't find another way.</p>
  
  <h3>Demo</h3>
  
  <p>To load on an iPad/iPhone: <a href="http://dominictobias.com/ios-layout-bug/" rel="nofollow noreferrer">http://dominictobias.com/ios-layout-bug/</a></p>
  
  <p><strong>Update:</strong> only breaks with <strong>maximum-scale=1</strong> on meta viewport which stops Safari zooming in when you change orientation.</p>
  
  <p><strong>Updated 2:</strong> Here is another fun bug with meta viewport:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"&gt;
  </code></pre>
  
  <p>If you do this and change orientation, it zooms in and then you cannot zoom out and see the whole website again - even refreshing doesn't work. You have to create a new tab to get back to a normal zoom level.</p>
  
  <p><strong>Updated 3:</strong> Rather than consider this a major bug Apple support asked me if it is happening on iOS 8 beta and marked the bug as No Rank.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"&gt;
      &lt;title&gt;iOS7 Layout break&lt;/title&gt;
  
      &lt;style&gt;
      body {
          background-color: red;
          margin: 0;
          padding: 0;
      }
      .container {
          background-color: black;
      }
      .inner-container {
          max-width: 75%;
          margin: 0 auto;
          padding: 30px;
          background-color: white;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="inner-container"&gt;
          &lt;p&gt;When you focus in on this field and change orientation, iOS7 (possibly other versions) will completely break by rendering some of the content off screen on the left and there seems to be no way to fix it by causing a repain - the node tree all the way up to the root thinks the width of the browser is now less than it was..&lt;/p&gt;
          &lt;input type="text"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3> When first focusing in:</h3>
  
  <p><img src="https://i.stack.imgur.com/5zruD.png" alt="At first when focused in"></p>
  
  <h3> Then all hell breaks loose, all the way up to the <code>&lt;html&gt;</code> element the width is as wide as the red bit, a lot of the site is disappearing into left space (off view, no scrollbar):</h3>
  
  <p><img src="https://i.stack.imgur.com/g8kA6.png" alt="All hell breaks loose on orientation change"></p>
  
  <h3> If you do orientation change back and then back again the browser starts to think it's a main character in the Inception film:</h3>
  
  <p><img src="https://i.stack.imgur.com/Ld7as.png" alt="enter image description here"></p>
  
  <p>So.. solutions? Will I have to listen for orientation change and programmatically focus out of the input before it breaks? <strong>Edit:</strong> tried this it didn't work (not quick enough).</p>