title: Autofocus form field causes loading issue in Firefox
body: <p>I have a Laravel-based web application, and I have a very odd and specific problem appearing on some pages in Firefox only.</p>
  
  <p>If I have a form on the page, and in that form there is a field with autofocus, the HTML loads before the CSS, and for a second or two, the user sees the page as plain text, before the CSS loads and then everything is back to normal.</p>
  
  <p>The correlation sounds far-fetched, but removing the autofocus from the form field resolves the issue in 100% of cases on the website. Is the autofocus somehow requiring the browser to load the HTML before the styling? How do I fix this without removing autofocus from all my forms?</p>
  
  <p>This is an example form field from the site:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
                      &lt;label for="card-number" class="col-md-4 control-label"&gt;Card Number&lt;/label&gt;
  
                      &lt;div class="col-md-6"&gt;
                          &lt;input id="card-number" type="text" class="form-control span4 card-number numbers-only" value="" required autofocus maxlength="16"&gt;
                          @if ($errors-&gt;has('card-number'))
                              &lt;span class="help-block"&gt;
                                      &lt;strong&gt;{{ $errors-&gt;first('card-number') }}&lt;/strong&gt;
                                  &lt;/span&gt;
                          @endif
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>All the CSS files are loaded in the <code>&lt;head&gt;</code> of the page:</p>
  
  <pre><code>&lt;!-- jQuery UI --&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
  &lt;!-- Theme Styles --&gt;
  &lt;link href="/assets/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="/assets/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  &lt;link href="/assets/css/styles.css" rel="stylesheet"&gt;
  </code></pre>