Pure CSS Parallax Scrolling (Keith Clark) проблема с использованием браузера Chrome

Я работаю над проектом и пытаюсь использовать Чистую методику прокрутки CSS Parallax от Keith Clark. (http://keithclark.co.uk/articles/pure-css-parallax-websites/) Я нахожу это сейчас (октябрь 2016 года), похоже, что он не работает в текущей версии Chrome. (Он работает на более старой версии и на Safari.) Этот Codepen of Keith's показывает технику: http://codepen.io/keithclark/pen/JycFw/Pure CSS Parallax Scrolling (Keith Clark) проблема с использованием браузера Chrome

Когда я просматриваю этот Codepen с Chrome, «фоновые» изображения в его # слайде1: перед и # slide3: перед псевдо элементы смещены.

Удовлетворительно не работает в 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; 
}

источник

2016-10-31 hommealone

Просто удалите 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);

}

источник

2016-11-01 01:00:56

Pure CSS Parallax Scrolling (Keith Clark) проблема с использованием браузера Chrome

ответ

Смежные вопросы