背景图像附件固定（视差）滞后/ Chrome上

Question

一些滚动我有滞后/轻弹我的视差图像的问题后笔触，我注意到页面的某些滚动后这个问题发生，只在页面里是猫头鹰旋转木马也。我发现了很多解决方案，但他们不适合我。

我会解决它不使用JavaScript库，你能给我一些建议吗？

你能看到我的问题在这page，标题为“承包商&建筑经理自1991年以来”的部分。

Answer 1

其简单..你可以试试这个代码。

HTML

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

<div id="slide1" class="slide"> 
    <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 id="slide2" class="slide"> 
    <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/output/abstract-q-c-640-480-6.jpg"> 
    <img src="http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"> 
</div> 

<div id="slide3" class="slide"> 
    <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 id="slide4" class="slide header"> 
    <h1>The End</h1> 
</div> 

CSS

@import url(http://fonts.googleapis.com/css?family=Nunito); 

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

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

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/output/abstract-q-c-640-480-6.jpg"); 
    background-attachment: fixed; 
} 

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

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

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

#slide4 { 
    background: #222; 
}