title: Rectangle of Death -- Mobile Safari
body: <p><em>(NOTE: Updates 1-5 below)</em></p>
  
  <p>I have a Twitter-Bootstrap based responsive web page, and the top-left corner of the page has a rectangular-shaped zone which is completely dead, but only on Mobile Safari (I haven't tested on Android).</p>
  
  <p><strong><em>Dead, defined:</em></strong></p>
  
  <ul>
  <li>Various buttons in the dead zone cannot be clicked</li>
  <li>Swiping up/down in the dead zone does <strong>not</strong> scroll the page up/down.</li>
  </ul>
  
  <p><strong><em>I added the following code:</em></strong></p>
  
  <pre><code>$('*').click(function(){ 
    console.log($(this)); 
  });
  </code></pre>
  
  <p>... and when I activated the mobile safari JS console, I noticed that the dead zone <strong><em>had become shifted up equal to the pixel height of the console strip!</em></strong>. Ie., the dead zone had shrunk. Furthermore, the console logged all clicks <strong><em>except</em></strong> for those performed in the dead zone.</p>
  
  <hr>
  
  <p><strong><em>UPDATE #1:</em></strong></p>
  
  <p>Per advice from the comments I...</p>
  
  <p>1) Double-checked <em>fixed</em>-positioned elements:</p>
  
  <pre><code>        $('*').click(function() { 
              console.log('checking for fixed elements...');
              $('*').each(function() {
                  if ($(this).css('position') == 'fixed') {
                      console.log($(this));
                  }
              })
          });
  </code></pre>
  
  <p>... it turned out my Bootstrap <strong><em>modal</em></strong> dialogs were all fixed position in mobile. I removed <em>all</em> of the dialogs and the problem persisted.</p>
  
  <p>2) Added the following CSS code....</p>
  
  <pre><code>* { outline: 1px solid red; }
  </code></pre>
  
  <p>Here is the iPhone screenshot. (The blue box I added afterwards in photoshop to approximate the dead zone)...</p>
  
  <p><img src="https://i.stack.imgur.com/yHsFW.png" alt="dead-zone screenshot"></p>
  
  <hr>
  
  <p><strong><em>UPDATE #2:</em></strong> OK, this is ridiculous. I started stripping stuff out of my code.This what I ended up with, and the problem persists!...</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt; 
  &lt;body&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong><em>UPDATE #3</em></strong>: This is likely a safari bug and has nothing to do with my webpage. (see update #2 below). I force-closed safari and when reopened the problem disappeared.</p>
  
  <hr>
  
  <p><strong><em>UPDATE #4</em></strong>: The problem reappeared :( Maybe it is my web page after all and not a safari fluke. However, it seems to happen randomly... Force-closing the browser will fix it for a while until it comes back again.</p>
  
  <hr>
  
  <p><strong><em>UPDATE #5</em></strong>: Once the dead zone appears, after navigating to another web page the dead zone is still there.</p>
  
  <hr>