title: Prepend a div without the screen blinking
body: <p>My question is similar to other questions, but with a twist.</p>
  
  <p>I'm trying to inject a div as follows : </p>
  
  <pre><code>var headerDiv = document.getElementById("headerDiv");
  if (headerDiv) {
  
      var logo = document.createElement('div');
      logo.id = "my-header";
      //logo.style.display = "none";
  
      var innerHTML = '   &lt;div id="my-header-image"&gt;&lt;/div&gt;' +
                      '   &lt;div id="my-header-text"&gt;' +
                      '       My header text' + 
                      '   &lt;/div&gt;  ';
      logo.innerHTML = innerHTML;
      headerDiv.insertBefore(logo, headerDiv.firstChild);     
  }
  </code></pre>
  
  <p>headerDiv already previously exists in the page and renders well.
  I'm calling my code only when the DOM is ready.</p>
  
  <p>My problem is as follows : when the injection happens, <strong>"logo" blits on the page as an entirely white div for a split second.</strong> It's almost not noticeable if you don't look well. Then the style gets applied and everything goes back to normal.</p>
  
  <p>It happens both in IE11 (IE10 mode or Edge mode) AND in <strong>Chrome</strong>.</p>
  
  <p><strong>It didn't happen when I was using jQuery</strong> instead of insertBefore.</p>
  
  <p>Here is the CSS : </p>
  
  <pre><code>#my-header {
      pointer-events: none; /* the clicks must go through -- to the native Sharepoint buttons underneath. Required for Edge compatibility. */
      display:block;
      position: absolute;
      text-align: center;
      width: 100%;
      z-index: 1000;
      height: 50px; 
      overflow: auto;
  
      /* fade-in */
      -webkit-animation: fadein 2s; /* Safari, Chrome and Opera &gt; 12.1 */
      -moz-animation: fadein 2s; /* Firefox &lt; 16 */
      -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera &lt; 12.1 */
      animation: fadein 2s;
  }
  
  #my-header-text {
      display:inline-block;
      padding: 0;
      position: relative;
      bottom: 15px;
      margin-left: 18px;
      color: white;
      font-size: 1.0em;
  }
  
  
  #my-header-image {
      display:inline-block;
      content: "";
  
      top: 3px;
      left: 20px;
      width : 184px; /* same size as logo image */
      height : 38px;
  
      margin-top: 6px;
      background-image: url("https://MY_URL/logo.png");
      background-size: contain;
      background-repeat:   no-repeat;
      background-position: center center; 
  }
  
  
  
  /* fade-in animation definition */
  
  @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Firefox &lt; 16 */
  @-moz-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Safari, Chrome and Opera &gt; 12.1 */
  @-webkit-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Internet Explorer */
  @-ms-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Opera &lt; 12.1 */
  @-o-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  </code></pre>
  
  <p>Could it be caused by the fade-in animation? The system doesn't know how to handle a new element that's supposed to start invisible (because of the animation) ?</p>
  
  <p>I've noticed that "logo" blinks <strong>above</strong> "headerDiv" instead of <strong>on top</strong>, despite its absolute positionning. One more clue of some property being ignored in the early stage of rendering, between the time when the div gets added and the time when its style gets applied.</p>