The fixed video with a lower z-index than my main container shows shortly when page loads

Question

I've two sections. One section is over the other, with a z-index of 1.

The problem however is that on page load / refresh the section under the other section shows for a short second.

I've tried changing the position of my CSS in the head so this would load first. I've even put the z-index line on the very top of the CSS file.

 <section class="full-grid" id="section-1"></section>
 <div id="trigger" class="fixer"></div>
 <section class="full-grid" id="section-1"></section>

 #section-1 {
  z-index: 1;
  max-width: 100vw;
  overflow: hidden;
  height: 100vh;
  background-image: url("img/page-1");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0vh;
}

.fixer {
 height: 100vh;
 width: 100vw;
 position: relative;
 top: 100vh;
}

#section-2 {
 max-width: 100vw;
 overflow: hidden;
 height: 100vh;
 background-repeat: no-repeat;
 background-size: cover;
 position: fixed;
 top: 0;
}

I expected the element not to flicker on load. But it does flicker on load.

Answer 1

You have a typo in your HTML markup. Both sections have an id of section-1.

The reason for the flicker could be because you are loading an image in as the background for section 1, so until this is loaded you will see the other section briefly behind it. Try setting a background colour on section 1 to white or what ever the background colour of the page is.

In the snippet below I have demonstrated this with 2 images section 1 has a cat and section 2 has a dog. You should only ever see the cat when loaded.

 #section-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #fff; background-image: url("https://source.unsplash.com/featured/?cat"); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .fixer { height: 100%; width: 100%; position: relative; top: 100vh; } #section-2 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background-image: url("https://source.unsplash.com/featured/?dog"); background-repeat: no-repeat; background-size: cover; } 

 <section class="full-grid" id="section-1"></section> <div id="trigger" class="fixer"></div> <section class="full-grid" id="section-2"></section> 

Answer 2

If you don't mind using JS, you can bring section 2 as invisible, and then, when DOM is loaded, set it back to visible, like this:

<section class="full-grid" id="section-1"></section>
<div id="trigger" class="fixer"></div>
<--! i changed the id of this element, i guess it should be section-2. Added a class hidden too-->
<section class="full-grid hidden" id="section-2"></section>

<script>

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', show_sections);
  } else {
      show_sections();
  }
  function show_sections() {

    var section2 = document.querySelector('#section2');
    //remove class hidden from section 2 when DOM is loaded to make it become visible and avoid flicking
    //if you intend to bring both elements together, just do the same for section1 (add class=hidden and declare it here with the same logic.
    section2.className = section2.className.replace(/hidden/g, '');
  }

</script>

#section-2.hidden {
  display:none;
}

#section-1 {
 z-index: 1;
 max-width: 100vw;
 overflow: hidden;
 height: 100vh;
 background-image: url("img/page-1");
 background-repeat: no-repeat;
 background-size: cover;
 position: absolute;
 top: 0vh;
}

.fixer {
height: 100vh;
width: 100vw;
position: relative;
top: 100vh;
}

#section-2 {
max-width: 100vw;
overflow: hidden;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
top: 0;
}