title: How to prevent a box with overflow-y: scroll from stealing the focus on tab on Firefox?
body: <p>Consider a page with the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
          &lt;style type="text/css"&gt;
              .steal-focus { overflow-y: scroll }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form action="/"&gt;
              &lt;input type="text" value="First"&gt;
              &lt;div class="steal-focus"&gt;Content&lt;/div&gt;
              &lt;input type="text" value="Second"&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <ol>
  <li>Load this page on Firefox.</li>
  <li>Hit tab a first time: the focus goes to the first text field.</li>
  <li>Hit tab a second time: the focus goes to the <code>&lt;div&gt;</code> instead of the second text field, because of the <code>overflow-y: scroll</code>.</li>
  </ol>
  
  <p>This behavior is unique to Firefox: this doesn't happen on IE, Safari, or Chrome. How can I get around this behavior, which sounds like a Firefox bug to me? I'd like the tab to skip over the <code>&lt;div&gt;</code> even if it has an <code>overflow-y: scroll</code>.</p>