title: jQueryMobile shows wrong height() value
body: <p>I have a really simply mark-up for a home/index screen/page for a jQM app:</p>
  
  <pre><code>&lt;div id="home" class="container" data-role="page"&gt;
      &lt;div class="grid-quarter"&gt;
          &lt;a class="ui-link"&gt;
              &lt;span class="grid-icon-container"&gt;
                  &lt;span class="grid-icon icon-lock"&gt;&lt;/span&gt;
                  &lt;span class="grid-icon-text"&gt;LABEL TEXT&lt;/span&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- 3 x the same --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>Problem</h3>
  
  <p>Now that works fine on jsFiddle, but as soon as I throw the exact same code in my jQM app, the js <code>.height()</code> function (and every other try to get the height of an element) fails.</p>
  
  <p>I wrote a function that checks every bit on any chance to determine the height and fails with jQM. It fails even if I'm trying to get it directly from the DOM object. And even when I see the DOM-object having the exact height set. Fun as it is: The <code>.width()</code> gets output correct.</p>
  
  <p>I don't know where to start debugging this issue. Any help is appreciated. Thanks.</p>
  
  <hr>
  
  <h3>Testing code</h3>
  
  <pre><code>// Trigger on Load and Resize 
  $( '#home' ).on( 
       'pageinit'
      ,function( event )
      {
          fitIconFont( '.icon-font' );
      }
  );
  // Fit on Window size change
  $( window ).resize( function()
  {
      fitIconFont( '.icon-font' );
  } );
  
  function fitIconFont( class_name )
  {
      // DEBUG
      jQuery( class_name ).each( function( index, element ) 
      {
              // WORKS:
          $( this ).on( 'click', function () 
          {
              console.log( $( this ).height() );
          } );
          console.log( $( element ).css('width') );
          console.log( $( element ).width() );
  
              // FAILS with 20px as output
          console.log( $( element ).css('height') );
          console.log( $( element ).height() );
          console.log( element.scrollHeight );
          console.log( element.offsetHeight );
          console.log( element.clientHeight );
          console.log( element );
  
          console.log( $( this ).height() );
          console.log( $( this ).css('height') );
          console.log( this.scrollHeight );
          console.log( this.offsetHeight );
          console.log( this.clientHeight );
          console.log( this );
      } );
  }
  </code></pre>
  
  <h3>Screenshot from Chrome dev bar</h3>
  
  <p><img src="https://i.imgur.com/790gK.png" /></p>
  
  <p><a href="http://jsfiddle.net/kaiser/qAcSR/1/" rel="nofollow noreferrer">Link to jsFiddle example</a></p>