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 pany 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?

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 pany 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?

• javascript
• css
• parallax
• background-attachment

• Please add screenshoot for this. – WooCaSh Commented Jul 5, 2013 at 22:36
• Well that's cool, I hadn't seen stellar before. Anyway, I just tried your example with a variety of image sizes for the background and multiple sections exactly as you showed above with exactly your css provided in Chrome 27, IE 10, and FF 19 and I had zero jitter whatsoever. I'm wondering if there's something peting for your mouse, or some loading issue? Did you try eliminating absolutely everything except what you provided above + jquery + stellar + a very simple initialization of stellar (just $.stellar({})? No other plugins at all? – Matt Mullens Commented Jul 6, 2013 at 6:47
• Also, what browser versions are you testing with and if you can provide a link to the site or even just some gists or paste them here, but with the plete html, css, all scripts being included, plugins, etc that would help significantly. – Matt Mullens Commented Jul 6, 2013 at 7:15
• Sure, here is the html (which shows what files I'm including as far as CSS and JS obviously): gist.github./TrevorHinesley/5f9e9fe8c4e052462914 – trevorhinesley Commented Jul 8, 2013 at 2:42
• 1 What are the original dimensions of the ../img/studio-10.jpg image? Can you see jittering on stellar's demos too? markdalgleish./projects/stellar.js/demos/backgrounds.html – Marcin Krawiec Commented Jul 12, 2013 at 20:02

4 Answers 4

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.

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.

try this

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

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

$.stellar({
  hideDistantElements: false
});

solved the flickering issue for me.