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>

Your best bet is to make your own scrolling engine by detecting mouse/touch start and end. Safard doesn't run the code while scrolling — Downgoat
– Downgoat, Commented Jun 12, 2015 at 20:20

SpiderMan · Accepted Answer · 2015-06-12 19:56:43Z

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.

answered Jun 12, 2015 at 19:56

SpiderMan

371 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

clickbait · Accepted Answer · 2015-06-12 19:33:09Z

0

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.

answered Jun 12, 2015 at 19:33

clickbait

3,0181 gold badge30 silver badges68 bronze badges

Collectives™ on Stack Overflow

Mobile Safari parallax scroll not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related