文字隐藏在视频背后 [英] Text is briefly hidden behind video

问题描述

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

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：

Javascript:

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

演示：
http://codepen.io/anon/pen/jqxqqj

推荐答案

使用translate3d（0,0,0）作为文本：

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

这篇关于文字隐藏在视频背后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！