tonoslfx tonoslfx - 1 year ago 87
CSS Question

Jittery parallax scrolling

I have wrote a website using parallax effect and having a few problems with jittery performance.

The page has been zoomed using CSS3 transform scale and on resize, automatically resizes the page using JavaScript / jQuery.

On the scroll, the backgrounds are positioned using scroll position on the wrapper box ( parallax backgrounds only inside ). With the image backgrounds moved on the scroll event using the CSS top position. The images have got a margin offset to give it the illusion of the position of the image staying still. I have enabled graphics acceleration and still getting jittery images on scrolling.

As I found out, CSS3 transform scale does not work with position fixed.

Any other solution?

Jittery parallax website:
Smooth parallax website:

Answer Source

Have you tried fixing the background using css:

background-attachment: fixed;

The example of the smooth parallax website uses this and is generally the best approach to keeping the background still while your content moves.