使用 Chrome 浏览器的纯 CSS 视差滚动 (Keith Clark) 问题答案

【问题标题】：Pure CSS Parallax Scrolling (Keith Clark ) issue using Chrome browser使用 Chrome 浏览器的纯 CSS 视差滚动 (Keith Clark) 问题
【发布时间】：2016-11-01 09:00:56
【问题描述】：

我正在做一个项目并尝试使用 Keith Clark 的纯 CSS 视差滚动技术。 (http://keithclark.co.uk/articles/pure-css-parallax-websites/) 我发现现在（2016 年 10 月）它似乎不适用于当前版本的 Chrome。（它适用于旧版本和 Safari。） Keith 的 Codepen 展示了该技术：http://codepen.io/keithclark/pen/JycFw/

当我使用 Chrome 查看 Codepen 时，他的 #slide1:before 和 #slide3:before 伪元素中的“背景”图像未对齐。

您能否确认它目前无法在 Chrome 中运行？谁能建议如何解决这个问题，以便它在当前版本的 Chrome 中工作？

我已经尝试应用他建议的所有与 Chrome 相关的“修复”，但没有成功，但也许我只是将它们应用到错误的元素上？我搜索了有关此技术的 Chrome 问题的讨论，但没有找到任何答案。这个问题可能与同一问题有关，但从未得到回答：Why does not (Pure CSS) Parallax Scrolling work properly in Chrome? (Slide #2 background bugs)我希望我的问题更具体！

这是来自 Codepen 的代码：

HTML：

<body>
<div class="slide header" id="title">
  <h1>Pure CSS Parallax</h1>
</div>

<div class="slide" id="slide1">
  <div class="title">
    <h1>Slide 1</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
</div>

<div class="slide" id="slide2">
  <div class="title">
    <h1>Slide 2</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
  <img src="http://lorempixel.com/640/480/abstract/6/">
  <img src="http://lorempixel.com/640/480/abstract/4/"> 
</div>

<div class="slide" id="slide3">
  <div class="title">
    <h1>Slide 3</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
</div>

<div class="slide header" id="slide4">
    <h1>The End</h1>
</div>

</body>

CSS：

html {
  height: 100%;
  overflow: hidden;
}

body { 
  margin:0;
  padding:0;
    perspective: 1px;
    transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

h1 {
   font-size: 250%
}

p {
  font-size: 140%;
  line-height: 150%;
  color: #333;
}

.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
    transform-style: inherit;
}

img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}

.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
}

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}

.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}

.slide, .slide:before {
  background: 50% 50% / cover;  
}

.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}

#title {
  background-image: url("http://lorempixel.com/640/480/abstract/6/");
   background-attachment: fixed;  
}

#slide1:before {
  background-image: url("http://lorempixel.com/640/480/abstract/4/");
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

#slide2 {
  background-image: url("http://lorempixel.com/640/480/abstract/3/");
  background-attachment: fixed;
}

#slide3:before {
  background-image: url("http://lorempixel.com/640/480/abstract/5/");
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

#slide4 {
  background: #222;
}

【问题讨论】：

标签： css google-chrome parallax

【解决方案1】：

只需从.slide 类中删除transform-style: inhert;：:)

.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
 box-sizing: border-box;
 box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);

}

【讨论】：