Z-index比我的主容器低的固定视频会在页面加载后不久显示

Question

我有两个部分。 一个部分位于另一部分之上，z索引为1。

但是，问题是在页面加载/刷新时，另一部分下面的部分会显示一秒钟。

我尝试过更改CSS在头部的位置，以便首先加载。 我什至将z-index行放在CSS文件的最上方。

 <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;
}

我希望该元素在加载时不会闪烁。 但是它在负载时会闪烁。

Answer 1

您的HTML标记中有一个错字。 两个部分的ID为section-1。

闪烁的原因可能是因为您正在加载图像作为第1部分的背景，因此在加载图像之前，您将在其后面短暂看到另一部分。 尝试将第1部分的背景色设置为白色，或页面的背景色。

在下面的代码段中，我已经用2张图片演示了此内容，第1部分包含一只猫，第2部分包含一只狗。 加载后，您才应该看到猫。

 #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

如果您不介意使用JS，则可以将第2部分设置为不可见，然后在加载DOM时将其设置回可见，如下所示：

<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;
}