文本暂时隐藏在视频后面

Question

我正在使用 fullpage.js 创建全屏页面。如果您滚动到下一部分并返回到第一部分（带有视频背景和叠加文本），则文本会在视频后面短暂 "hidden"，然后再次显示。到目前为止，这个问题只发生在我的 Chrome（版本 49.0.2623.112）上。

HTML:

<div id="fullpage">
    <div class="section">
      <div class="text">1233123123</div>
      <div class="video-background">
          <video autoplay muted loop>
            <source data-src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
          </video>
      </div>
    </div>
    <div class="section">
       <div class="slide" data-anchor="slide1">
       <img src="" data-src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" />
       </div>
        <div class="slide" data-anchor="slide2">Two 2</div>
    </div>
    <div class="section">
       <img src="" data-src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png" />
    </div>
    <div class="section">Four</div>
</div>

CSS:

.section {
  text-align:center;
  font-size: 3em;
  position: relative;  
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  font-size: 123px;
  z-index: 2;
  position: absolute;
  margin: 0 auto;
  background-color: red;
}
div.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    overflow: hidden;
    z-index: 1;
}
div.video-background video {
    min-width: 100%;
    min-height:100%;
}

Javascript:

$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});

演示： http://codepen.io/anon/pen/jqxqqj

Answer 1

对文本使用 translate3d(0,0,0)：

.text {
  font-size: 123px;
  z-index: 2;
  position: absolute;
  margin: 0 auto;
  background-color: red;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

文本暂时隐藏在视频后面

Text is briefly hidden behind video

javascript

css

jquery

google-chrome

fullpage.js