Question

我正在研究一个项目并尝试使用Keith Clark的Pure CSS Parallax Scrolling技术。（http://keithclark.co.uk/articles/pure-css-parallax-websites/）我现在（2016年10月）发现它似乎无法在当前版本的Chrome中运行。（它适用于旧版本和Safari。）这个Keith的Codepen显示了这项技术：http://codepen.io/keithclark/pen/JycFw/

当我通过Chrome查看Codepen时，＆＃34;背景＆＃34;他的＃slide1：之前和＃slide3：伪元素未对齐之前的图像。

您能否确认目前无法在Chrome中使用？任何人都可以建议如何解决这个问题，以便它可以在当前版本的Chrome中使用吗？

我已尝试应用所有与Chrome相关的修复程序＆＃34;他建议，但没有成功，但也许我只是将它们应用于错误的元素？我已经搜索了有关此技术的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;
}

Answer 1

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

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

}

使用Chrome浏览器的纯CSS Parallax Scrolling（Keith Clark）问题

1 个答案: