background-attachment fixed alternatives

Question

I just had an issue, that I have 2 hero image sections on the same page, and I had to use background-attachement: fixed on them. Don't have to say, that the scroll is very slow on most browsers (looking at you IE). So the performance is not very good. Oh and this site has also some parallax scrolled elements (with stellar.js) with smooth scroll (used: nicescroll.js for this). Ofcourse I made the images as small as possible and try not to use background-size: cover (performance again). Oh and I use the window.requestAnimationFrame() in my core.js file (performance again).

Is there a way to make this 2 hero sections images work like background-image: fixed ?

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

Historically, background-attachment:fixed;has always suffered from performance issues. I would suggest that instead of this, a position:fixed; element is used instead.

Then, you can make the fixed background and the scrollable content sections sit on their own layers in the GPU, by using transform:translateZ(0); - this should offer additional performances gains.

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