Stellar.js background snap set to fixed but crazy jitter still happens

Question

As the name implies, I use Stellar.js. I have only one parallax element, and it is very simple. This is a section with a background image. The background image is set to fixed (for example, as the documentation says, to avoid jitter), but the image is still unstable - in Chrome, which is very bad in other browsers. It does not change when I remove fixed CSS.

Here is the item:

<!--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 simple. Any tips?

Answer 1

The problem ended up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. After deleting this image, the jitter stopped.

Answer 2

Have you tried to use smaller images? Those used in the star demo are smaller (1280x640px) and do not have a background-size property. Try to reduce the image and / or without the background-size property, which can cause performance problems.

Answer 3

try it

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