文字隐藏在video背后

我正在使用fullpage.js来创建全屏页面。 如果您滚动到下一部分并向后滚动回第一部分（带有video背景和叠加文字），文本将暂时“隐藏”在video后面，然后再次显示。 到目前为止，此问题仅发生在我的Chrome（版本49.0.2623.112）上。

HTML：

 
 
1233123123
 
  
 
 
 
  
 
Two 2
 
 
  
 
Four
  

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