Mobile Safari parallax scroll not working

Question

I have developed this JavaScript code to do parallax scrolling on an image at the top of the page. The code works flawlessly in Chrome, FF, IE, Opera and Safari, on desktop. When I test it on Safari on my iPad though, it ignores the parallax scrolling all-together, and just scrolls normally past the image. I have tried to debug from my iPad, but it doesn't seem to be working because I have a Windows computer. Does anyone see any reason why this wouldn't work on mobile Safari? Note: I also tried implementing background-position-x and background-position-y from another StackOverflow post, but it didn't help at all.

JS Code:

   var getHeight = window.innerHeight;
    if (getHeight > 750) {
        $('#bannerImage').each(function () {
            var $obj = $(this);

            $(window).scroll(function () {

                var yPos = -($(window).scrollTop() / 5);
                var xPos = -($(window).scrollLeft() / 5);
                var bgpos = yPos + 'px';
                var bgposx = xPos + 'px';
                var coordinates = bgposx + ' ' + bgpos;

                $("div#slideshow div img").css('background-position', coordinates);
                $("div#slideshow div img").css('background-position-x', bgposx);
                $("div#slideshow div img").css('background-position-y', bgpos);

            });
        });
    }
});

HTML:

<div class="BannerContainer">
<div class="vibeBannerRotator">
<div id="bannerImage">
<div id="slideshow">
<div id="imgContents_1">
<img style="background-image: url('/Images/ssie_images/SSIE-Header01.jpg'); background-repeat: no-repeat; background-size: 100%;">
</div>
</div>
</div>
</div>
</div>

Answer 1

After reviewing my code some more, I have found that this line of code was stopping the JavaScript from executing : var getHeight = window.innerHeight; if (getHeight > 750). I was testing this on my iPad in portrait mode, and while the screen height is technically 768px, the URL bar & top menu account for about 44px, thus the conditional 'IF' block was returning false, and the code wasn't executing. After dropping the number down to 600, I have tested again and all seems well.

Answer 2

The problem is that Mobile Safari doesn't execute code while scrolling.

I figured this out when I made a JavaScript game that runs on Mobile Safari. But if I swipe, it scrolls the page, periodically stopping the game.

Another example: Animated GIFs stop animating while you scroll.

You can't get around that, unfortunately.