Javascript 文本暂时隐藏在视频后面

我正在使用fullpage.js创建全屏页面。 如果您滚动到下一节并滚动回第一节（带有视频背景和叠加文本），文本将在再次显示之前短暂“隐藏”在视频后面。 到目前为止，这个问题只发生在我的Chrome（版本49.0.2623.112）上

HTML:

Javascript:

$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});

演示： 使用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);
}

---

我认为这是一个Chrome渲染问题。我认为你对此无能为力。我可能也错了。@mlegg它不起作用（@Roy有一个解决方案。我回答了。所以硬件加速使它的渲染速度如此之快，以至于你再也看不到闪烁了？不。这不是原因。这是因为浏览器的渲染和翻译3D存在一些问题。fullpage.js使用css3转换，这就是为什么你还需要在视频中使用它们来解决它。为什么？问兄弟wser的开发者：）

$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});

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