Stellar.js background attachment set to fixed but crazy jitter still happening

Question

As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is still jittery--somewhat in Chrome, really bad in other browsers. It doesn't change when I remove the fixed CSS either.

Here is the element:

<!--Testimonial Section-->
    <section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
      <div class="container">
        <div class="row">
          <div class="span3 margin-30">
            <img src="img/testimonial-img.png" alt="Title">
          </div>

          <div class="span9">
            <h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”</h2>
            <div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
          </div>
        </div>
      </div>
    </section>

And here is the CSS:

#testimonial {
  background: url(../img/studio-10.jpg) no-repeat center;
  background-size: 2000px 2000px;
  background-attachment: fixed;
  padding-top: 120px;
  padding-bottom: 120px;
}

Pretty straightforward. Any advice?

Answer 1

The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.

Answer 2

Have you tried using smaller images? Those used in stellar's demo are smaller (1280x640px) and do not have the background-size property. Try with smaller image and/or without the background-size property - that may cause those performance problems.

Answer 3

try this

#testimonial {
  background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
  width: 2000px; 
  height: 2000px;
  padding-top: 120px;
  padding-bottom: 120px;
}

Answer 4

I know this is an old question but changing $.stellar() or $(window).stellar(); to :

$.stellar({
  hideDistantElements: false
});

solved the flickering issue for me.