Text is briefly hidden behind video

Question

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

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