Текст коротко скрыт за видео

Question

Я использую fullpage.js для создания полноэкранных страниц. Если вы перейдете к следующему разделу (разделам) и прокрутите назад до первой секции (с фоновым изображением и текстом оверлея), текст будет кратковременно «скрыт» за видео до появления снова. Эта проблема возникает только на моем 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); 
}