background-attachment feste Alternativen

Question

Ich hatte gerade ein Problem, dass ich 2 Helden Bildabschnitte auf der gleichen Seite habe, und ich musste background-attachement: fixed auf ihnen verwenden. Ich muss nicht sagen, dass die Scroll in den meisten Browsern sehr langsam ist (mit Blick auf IE). Die Leistung ist also nicht sehr gut. Oh, und diese Seite hat auch einige Parallax Scroll-Elemente (mit stellar.js) mit glatten Blättern (verwendet: nicescroll.js dafür). Natürlich habe ich die Bilder so klein wie möglich gemacht und versuche background-size: cover (Leistung nochmal) nicht zu benutzen. Oh, und ich verwende die window.requestAnimationFrame() in meiner core.js-Datei (Leistung wieder).

Gibt es eine Möglichkeit, diese 2 Heldenschnittbilder wie background-image: fixed arbeiten zu lassen?

index.html

<div class="first-hero"> 

</div> 
<div class="content"> 
    . 
    . 
    lots of parallax content goes here 
    . 
    . 
</div> 
<div class="second-hero"> 

</div> 

style.css

.first-hero{ 
    background: transparent url('image1.jpg') no-repeat; 
    background-attachment: fixed; 
    height:400px; 
    width:100vw; 
} 
.second-hero{ 
    background: transparent url('image2.jpg') no-repeat; 
    background-attachment: fixed; 
    height:350px; 
    width:100vw; 
} 
.content{ 
    width:100vw; 
    height:2500px; 
} 

Answer 1

Historisch background-attachment:fixed; hat eine litt immer unter Leistungsproblemen. Ich würde vorschlagen, dass stattdessen ein position:fixed; Element verwendet wird.

Dann können Sie den festen Hintergrund und die scrollbaren Inhaltsabschnitte auf ihren eigenen Ebenen in der GPU setzen, indem Sie transform:translateZ(0); verwenden - dies sollte zusätzliche Leistungssteigerungen bieten.

Fiddle: https://jsfiddle.net/gstnr9w5/1/

.fixed-background{ 
    position:fixed; 
    left:0; 
    top:0; 
    right:0; 
    bottom:0; 
    background:url(https://unsplash.it/1000/1000?image=1080); 
    background-size:cover; 
    background-position:center center; 
    z-index:0; 
} 

.content{ position:relative; z-index:1; color:white; font-size:22px; line-height:32px; font:serif; padding:80px; } 


.fixed-background, .content{ 
    transform:translateZ(0); 
    -webkit-transform:translateZ(0); 
    -moz-transform:translateZ(0); 
} 

Answer 2

in Ihrer zweiten Helden CSS-Anweisung versuchen, die folgenden:

.second-hero{ 
    background: transparent url('image2.jpg') no-repeat; 
    background-attachment: fixed bottom; 
    height:350px; 
    width:100vw; 
}