Parallax scrolling is stuttering in Internet Explorer 11 and Safari
I have a solution for a parallax like scrolling effect for a website but somehow it behaves shaky in Safari 9.0.1 (Mac) and Internet Explorer 11 (Windows 7).
My solution uses jQuery 1.11 and works by adjusting the background-position of a div with jQuery's .css() method. This should have the visual effect of a fixed background image which can be scrolled over.
Here is a simplified demo of my problem: https://jsfiddle.net/Lypnb63c/1/
To be more precise the problem seems to relate with the function dontScrollBackground().
One strange thing that I have discovered is also that most browsers get more shaky once I remove a div with position:fixed.
Here a demo with a div element with position:fixed: https://jsfiddle.net/Lypnb63c/1/
- Does anyone have a clue if there is a browser specific problem with my solution?
- Is there a simple way to make it work in all major browsers?
One solution could be the usage of pure css but I would like to try it with my current solution first.
I would be thankful for any help.
Solved this problem myself. The problem was line 12 $(this).css("background-position", "52% " + (st - y) + "px");.
I found out that the same effect can be reached by adding the following style to the element representing the background: background-attachment: fixed. Therefore the solution of my problem was to change the above mentioned line 12 to $(this).css("background-attachment", "fixed");
I hope my solution will help people who run into a similar problem like I did.