使用Chrome浏览器的纯CSS视差滚动(Keith Clark )问题
使用Chrome浏览器的纯CSS视差滚动(Keith Clark )问题
提问于 2016-11-01 07:13:14
我正在做一个项目，并尝试使用Keith Clark的纯CSS视差滚动技术。(http://keithclark.co.uk/articles/pure-css-parallax-websites/)我发现现在(2016年10月)它似乎不能在当前版本的Chrome上工作。(它可以在旧版本和Safari上运行。)基思的这段代码展示了这种技术：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;
}Stack Overflow用户
发布于 2016-11-01 09:00:57
只需从.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);}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40351931
复制相关文章
相似问题
腾讯云开发者
