Question

我使用fullpage.js来创建全屏页面。如果您滚动到下一部分并向后滚动到第一部分（带有视频背景和叠加文本），则会短暂地隐藏文本＆＃34;隐藏＆＃34;视频背后再次出现。到目前为止，此问题仅发生在我的Chrome（版本49.0.2623.112）上。

HTML：

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

CSS：

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

Javascript：

SELECT 
    ml.laser
   ,pm.pistol_model_brand
   ,pm.pistol_model_name
FROM pistol_model as pm
INNER JOIN model_laser as ml
ON pm.pistol_model_id = ml.model_id
and pm.pistol_brand_id = ml.pistol_brand_id
WHERE 
    ml.laser LIKE 'GTO%'
ORDER BY 
    ml.laser

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

文字隐藏在视频背后

1 个答案: