javascript - 文本暂时隐藏在视频后面

标签 javascript jquery css google-chrome fullpage.js

我正在使用 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

最佳答案

对文本使用 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);
}

关于javascript - 文本暂时隐藏在视频后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36658559/

相关文章:

html - 如何使用 css 垂直堆叠(和包装) block 元素列表

javascript - ZK 自定义日历弹出窗口

javascript - 使用 Javascript 在文本框中只允许数值

javascript - 将 pipl 与 Node.js 结合使用

jquery - 显示一个div(有样式“display :none") by clicking image in another div

php - 如何使用ajax php将表格内容保存在数据库中

html - 如何垂直对齐我的 <li> 元素,以便文本位于导航栏的中间(垂直而言)?

javascript - 如何在页面加载后自动加载弹出窗口而不使用单击,悬停,焦点?

Jquery,如果 optgroup 不包含

html - 为什么 W3C 链接验证器给出 "400 URL must be absolute"?