I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement.
The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery.
For the parallax effect, the backgrounds move based on scroll position within the wrapper box, with image backgrounds adjusting their CSS top position. To achieve the illusion of static images, there is a margin offset applied. Despite enabling graphics acceleration, the scrolling still appears jittery.
After some investigation, I discovered that CSS3 transform scale does not play well with position fixed.
Are there any other solutions to improve the performance of my parallax website?
Example of jittery parallax website: Example of smooth parallax website: