title: iFrame not loading in Chrome unless window is resized
body: <p>I have a web page as below which has <code>Invoice numbers</code> on the left side and when a user clicks on it, its details are loaded in <code>iframe(id='invoiceFrame')</code> which works fine in IE but in Chrome iframe is not loaded unless the window is resized</p>
  
  <p><code>Google Chrome Version 42.0.2311.90 (Official Build) m (32-bit)</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     function getUrlParameter(URL, param){
      var paramTokens = URL.slice(URL.indexOf('?') + 1).split('&amp;');
      for (var i = 0; i &lt; paramTokens.length; i++) {
          var urlParams = paramTokens[i].split('=');
          if (urlParams[0].endsWith(param)) {
              return urlParams[1];
          }
      }
    } 
  String.prototype.endsWith = function(pattern) {
      var d = this.length - pattern.length;
      return d &gt;= 0 &amp;&amp; this.lastIndexOf(pattern) === d;
  };
  
   function resizeIframe(obj) {
      obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }
      jQuery(document).ready(function () {
      jQuery("#mainFrame").hide();
     jQuery('#invoiceList tr:not(:first-child)').click(function(e){
      jQuery(".message").hide();
      e.preventDefault();
      var invoiceNumber =  jQuery(this).find("td").eq(0).text();
      var url = window.location.href;
     var lipId = getUrlParameter(url, 'lipId') 
    var invURL = '/CP/Invoice/InvoiceLineErrors.do?lipId='+lipId+'&amp;invNum='+invoiceNumber;
     console.log('invoiceNumber '+invURL);
    jQuery("#mainFrame").show();
   document.getElementById("mainFrame").src =invURL;
  
  });
     });
    &lt;/script&gt;
         &lt;style&gt;
      h2.message{text-align: center; color: #FDFDFD; font-size: 1.1em; background: #708fc3; }  
      #invoiceList{ float: left; width: 15%; overflow-x:auto; }
      #invoiceFrame{float: right; width: 83.5%;   margin-bottom: 0em !important; }
  
          td error { color: red; font-size: 100%;} 
         tr.errortrue { color: #c33; font-size: 100%; font-weight: bold;} 
          table#lines th { background-color : grey;  color: white; width:100%}
         table {margin-bottom: 2em; border-bottom: 2px solid #ebebeb; empty-cells: show; border-collapse: collapse; }
         table#lines td { text-align: center; width:100%}
  
      iframe { float: left; width: 100%;  height =300px;
          }
         &lt;/style&gt;
      &lt;/head&gt;
      &lt;body id='foo'&gt;
  &lt;div class="ui-widget"&gt;
  &lt;center&gt;&lt;h1&gt; Invoice Error Details For ePacket P00000080235&lt;/h1&gt;&lt;/center&gt;
    &lt;div class="panel ui-widget-content" id="invoiceList"&gt;
   &lt;h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-size: 1.1em; "&gt;&lt;span&gt;Invoices&lt;/span&gt;&lt;/h2&gt;
  &lt;table cellspacing='0' id='header' class="ui-widget"&gt;
     &lt;tr&gt;
          &lt;th&gt;Invoice Number&lt;/th&gt;
           &lt;th&gt;Invoice Total&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class = 'errortrue'&gt;
        &lt;td&gt;2015.04.08.001&lt;/td&gt;
        &lt;td&gt;59.97&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt; 
  &lt;/div&gt;
  &lt;!-- &lt;div class='panel ui-widget-content' id="invoiceDetails"&gt;
  &lt;h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "&gt;&lt;span&gt;Select the Invoice Number on the left to view the error details&lt;/span&gt;&lt;/h2&gt;--&gt;
  &lt;h2 class='message'&gt;&lt;span&gt;Select the Invoice Number on the left to view the error details&lt;/span&gt;&lt;/h2&gt;
  &lt;div class='panel ui-widget-content' id="invoiceFrame"&gt;&lt;iframe src="" id="mainFrame" name="mainFrame" scrolling="no"  class='panel ui-widget-content' onload='javascript:resizeIframe(this);'&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Below is the content of the iframe</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery('table#lines tr').each(function(){
    if (jQuery(this).html() == '') {
      jQuery(this).hide();
    }
  });
    &lt;/script&gt;
         &lt;style&gt;
         #invoice {padding: 0;}
         #invoiceErrors {overflow-x: auto;  overflow-y: auto;}
         tbody td{ border-top: 2px solid #efefef; border-bottom: 0px !important ;}
         td.error { text-align: left; color: #c33; font-size: 100%; background-image: none !important; padding-left : 0; border-bottom: 2px solid #0891F4;   white-space: nowrap;} 
         tr.errortrue { color: #c33; font-size: 100%; font-weight: bold;   white-space: nowrap;} 
  
         table {empty-cells: show; border-collapse: collapse; }
         table#lines td { text-align: left;}
  
         &lt;/style&gt;
      &lt;/head&gt;
  &lt;body id='invoice'&gt;
   &lt;div id="invoiceErrors"&gt;
    &lt;div class='panel ui-widget-content' id="invoiceHeaders"&gt;
  &lt;h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: Tahoma,Arial,sans-serif; font-size: 1.2em;"&gt;&lt;span&gt;Header Details&lt;/span&gt;&lt;/h2&gt;
      &lt;table class="ui-widget" id="headers"&gt;
                     &lt;tr&gt;
                          &lt;th&gt;Invoice Number&lt;/th&gt;
                           &lt;th&gt;Matter Number&lt;/th&gt;
                          &lt;th&gt;Invoice Total&lt;/th&gt;
                          &lt;th&gt;Invoice Tax Total&lt;/th&gt;
                          &lt;th&gt;Invoice Net Total&lt;/th&gt;
                    &lt;/tr&gt;
  
                       &lt;tr class='errortrue'&gt;
                          &lt;td&gt;2015.04.08.001&lt;/td&gt;
                           &lt;td&gt;MAT-2&lt;/td&gt;
                          &lt;td&gt;59.97&lt;/td&gt;
                          &lt;td&gt;59.97&lt;/td&gt;
                          &lt;td&gt;59.97&lt;/td&gt;
                    &lt;/tr&gt;
  &lt;tr &gt;&lt;td class = 'error'  style="padding-bottom: 4%;"&gt;
  
                Line : 1 Invoice tax total does not foot Reported = (0.0) Calculated = (1.0)&lt;br/&gt;
  
                Line : 1 Invoice Taxable Amount does not foot Reported = (59.97) Calculated = (58.97)&lt;br/&gt;
  
  &lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt; 
  &lt;/div&gt;
  &lt;div class='panel ui-widget-content' id="invoiceLines"&gt;
  &lt;h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: Tahoma,Arial,sans-serif; font-size: 1.2em;"&gt;&lt;span&gt;Invoice Line Items&lt;/span&gt;&lt;/h2&gt;
  
   &lt;table class="ui-widget" id="lines"&gt;
  &lt;tr&gt;
  &lt;th&gt;Line Item Number&lt;/th&gt;
  &lt;th&gt;Line Item Date&lt;/th&gt;
  &lt;th&gt;Unit Cost&lt;/th&gt;
  &lt;th&gt;Number of Units&lt;/th&gt;
  &lt;th&gt;Line Item Total&lt;/th&gt;
  &lt;/tr&gt;
  
  &lt;tr class='errortrue'&gt;
  &lt;td&gt;1&lt;/td&gt;
  &lt;td&gt;20150402&lt;/td&gt;
  &lt;td&gt;19.99&lt;/td&gt;
  &lt;td&gt;3&lt;/td&gt;
  &lt;td&gt;59.97&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="9" class='error' style="padding-bottom: 6%;"&gt;       
        Line : 1 MATH ERROR: ((19.99*3.0) - (0.0)) * (1.0) != 1.0 variance = 58.97&lt;br/&gt;
        Line : 1 MATH ERROR: (19.99*3.0) - (0.0) + (1.0) != 59.97 variance = 1.0&lt;br/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Can someone please help me with the iframe issue?</p>