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?

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 competing 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, Jul 06 '13 at 06: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 complete html, css, all scripts being included, plugins, etc that would help significantly. — Matt Mullens, Jul 06 '13 at 07:15
Sure, here is the html (which shows what files I'm including as far as CSS and JS obviously): https://gist.github.com/TrevorHinesley/5f9e9fe8c4e052462914 — trevorhinesley, Jul 08 '13 at 02:42
What are the original dimensions of the `../img/studio-10.jpg` image? Can you see jittering on stellar's demos too? http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html — Marcin Krawiec, Jul 12 '13 at 20:02
@MarcinKrawiec I can't see jitter on those demos, and the image I'm using is 2250 × 1500 — trevorhinesley, Jul 12 '13 at 21:36

score 1 · Accepted Answer · answered Aug 01 '13 at 14:34

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.

answered Aug 01 '13 at 14:34

trevorhinesley

845
1
10
36

Marcin Krawiec · Answer 2 · 2013-07-12T21:54:27.940

0

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.

edited Jul 12 '13 at 21:54

answered Jul 12 '13 at 21:42

Marcin Krawiec

703
3
8

No luck! Tried it and it didn't seem to help. – trevorhinesley Jul 17 '13 at 01:45
Have you tried to run this plugin in isolation (removing other js components and/or other html sections)? Try commenting out everything else, use a smaller image and use css similar to those from demos (I would even remove all css and leave only parts that are necessary for this plugin). This will show where the problem is - if it's related to the plugin or maybe jittering is caused by something else. After making that simple demo you can a) if jittering still occurs put it somewhere so we could nail the problem down or b) turn on step-by-step everything back and find out where the problem is. – Marcin Krawiec Jul 17 '13 at 11:36

score 0 · Answer 3 · answered Jul 23 '13 at 12:48

0

try this

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

answered Jul 23 '13 at 12:48

Raoul

1

score 0 · Answer 4 · answered Nov 09 '18 at 03:00

0

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

$.stellar({
  hideDistantElements: false
});

solved the flickering issue for me.

answered Nov 09 '18 at 03:00

Nick Parsons

45,728
6
46
64

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

4 Answers4