I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect was not working and the image just scrolled normally. I tried debugging from my iPad but faced challenges due to using a Windows computer. Can anyone figure out why this might not be working on mobile Safari? I also attempted to implement 'background-position-x' and 'background-position-y' from a StackOverflow post, but it did not improve the situation.
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>