title: Tabbing into an input element causes default browser scroll to go to wrong area
body: <p>I've built a sidebar and tabbing through items in the sidebar works fine until you tab into the input box. </p>
  
  <p>When you tab into the input box, the browser scrolls way past the input box.</p>
  
  <p>Also it only seems to happen on smaller resolutions / common laptop resolutions. I can't seem to reproduce this on a large desktop monitor.</p>
  
  <p>Why does the browser scroll to the wrong area when you tab into the input box?</p>
  
  <p>The code and reproducible bug may be viewed here:
  <a href="http://plnkr.co/edit/iUsJSQs4LL8YVs4luDRX?p=preview" rel="nofollow">http://plnkr.co/edit/iUsJSQs4LL8YVs4luDRX?p=preview</a></p>
  
  <p>Steps:  </p>
  
  <ol>
  <li>Click on the Plunker link to open the demo site</li>
  <li>Open up Dev Tools, and toggle device mode (the phone icon in dev tools in the  top left corner)</li>
  <li>In device mode, select Apple Ipad 3/4 for the device</li>
  <li>Click anywhere on the yellow sidebar to give it focus</li>
  <li>Press tab to tab into the textarea </li>
  <li>Press tab to advance to the next
  textarea </li>
  <li>Press tab to advance to the input box, notice the browser
  scrolls way off target </li>
  <li>Press tab to advance to the save button,
  notice the browser scrolls to the correct position</li>
  </ol>
  
  <p>index.html:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="sidebar"&gt;
        &lt;div class="content"&gt;
          &lt;div class="section"&gt;&lt;/div&gt;
          &lt;div class="section"&gt;&lt;/div&gt;
          &lt;div class="section"&gt;&lt;/div&gt;
          &lt;div class="section"&gt;
            &lt;textarea&gt;&lt;/textarea&gt;
            &lt;textarea&gt;&lt;/textarea&gt;
            &lt;label&gt;TEST&lt;/label&gt;
            &lt;input value="3"&gt;
            &lt;button&gt;SAVE&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="section"&gt;&lt;/div&gt;
          &lt;div class="section"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.sidebar {
    background-color: yellow;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
  
  .content {
    float: left;
    height: 100%;
    overflow-y: auto;
    width: 278px;
  }
  
  .section {
    height: 700px;
    position: relative;
  }
  </code></pre>
  
  <p>Edit: 
  I'm using Chrome Version 40.0.2214.94 (64-bit) on OSX 10.9.5 on a macbook pro 15" 2014 at the default retina resolution.</p>
  
  <p>Here is a screen capture of the problem I am seeing:<br>
  (Not enough reputation to paste image inline so I've uploaded it for viewing)</p>
  
  <p><a href="http://minus.com/i/Y52LYpU6SveE" rel="nofollow">http://minus.com/i/Y52LYpU6SveE</a></p>