Parallax scrolling is stuttering in Internet Explorer 11 and Safari

Question

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/

Question:

1. Does anyone have a clue if there is a browser specific problem with my solution?
2. 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.

Answer 1

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.