Text is briefly hidden behind video

问题

I am using fullpage.js to create full screen pages. If you scroll to the next section(s) and scroll back to the first section (with video background and the overlay text), the text is briefly "hidden" behind the video before showing up again. This problem only happens on my Chrome(Version 49.0.2623.112) so far.

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'],
});

Demo: http://codepen.io/anon/pen/jqxqqj

回答1:

Use translate3d(0,0,0) for the text:

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

来源：https://stackoverflow.com/questions/36658559/text-is-briefly-hidden-behind-video

标签

javascript

jquery

css

google-chrome

fullpage.js