テキストを簡単に私はフルスクリーンページを作成するfullpage.jsを使用していたビデオ

Question

の背後に隠されています。 次のセクション（S）までスクロールし、（ビデオの背景とオーバーレイテキスト付き）最初のセクションに戻ってスクロールすると、テキストは再び表示する前に簡単にビデオの背後にある「隠し」です。 この問題は、これまでの私のクロム（バージョン49.0.2623.112）で発生します。

HTML：

​​

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）は、fまたはテキスト：

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