title: chrome mobile, jquery .ready() not firing when expected
body: <p>I am working on an app for desktop/mobile. The jQuery <code>$(document).ready();</code> is definitely firing, which is why the app works. However, in the Chrome mobile browser, one particular function (to add some dynamic CSS to one element to place it correctly) is not firing correctly, and thus not updating the CSS when the page loads. The function fires normally and updates the CSS in the desktop browser. Here is the code:</p>
  
  <pre><code>$(document).ready(function() {
    function placeBook() {
      var h = $('#header').css('height');
      $('#button').css('height', h);
      $('#button').css('line-height', h);
    }
    placeBook();
    $(window).resize(function() {
      placeBook();
    });
  });
  </code></pre>
  
  <p>The function <code>placeBook()</code> is not updating the CSS of the <code>#button</code> div on the first load of the page. However, the function fires <em>normally</em> on resize of the window, as specified in the code. It only fails on the mobile browser at the initial load of the page. See these SS's:</p>
  
  <p>First load in desktop (FF responsive design view):</p>
  
  <p><img src="https://i.stack.imgur.com/kp5US.png" alt="enter image description here"></p>
  
  <p>First load in mobile (Chrome):</p>
  
  <p><img src="https://i.stack.imgur.com/nLRMx.png" alt="First load in mobile"></p>
  
  <p>As you can see, the idea is that the book icon is to be centered vertically in the header. Of course, any help is appreciated.</p>
  
  <p>Here is the HTML/CSS:</p>
  
  <pre><code>&lt;div id='header'&gt;
     &lt;div id='button'&gt;&amp;#xe600;&lt;/div&gt;
  &lt;/div&gt;
  
  
  #header {
     position: fixed;
     top: 0;
     width: 100%;
     font-size: 120%;
     text-align: center;
  }
  #button {
     position: absolute;
     top: 0;
     left: 0;
     padding: 0 1%;
  }
  </code></pre>