title: behavior of iframe contentDocument in chrome and firefox
body: <p>Here is my testing.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script&gt;
  window.onload = function() {
      var a = document.getElementById("divid");
      var ifr = document.createElement('iframe');
      a.appendChild(ifr);
      ifr.contentDocument.body.style.cssText = (
        'margin: 0px;' +
        'padding: 0px;' +
        'height: 100%;' +
        'width: 100%;');
  }
  &lt;/script&gt;
  
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div id="divid"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here ifr.contentDocument.body.style.cssText = (...) works fine on chrome but not on Firefox. Is it a firefox bug? Is there any workaround?</p>
  
  <p>Found workaround:
  Looks like there is a weird race bug in firefox. The following workaround with setTimeout will make this work fine as shown below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script&gt;
  window.onload = function() {
      var a = document.getElementById("divid");
      var ifr = document.createElement('iframe');
      ifr.id = "fid";
      a.appendChild(ifr);
      setTimeout (function() {
          ifr.contentDocument.body.style.cssText = (
          'margin: 0px;' +
          'padding: 0px;' +
          'height: 100%;' +
          'width: 100%;');
      }, 100);
  }
  &lt;/script&gt;
  
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div id="divid"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>