How to enable parallax on mobile? (Currently functional on desktop)

[empiricalarby]

https://empiricalwater.com/

On desktop, you'll see a parallax effect on the banner image. It works beautifully.

However on mobile, it is quite zoomed in, and no parallax effect is applied.

Here's the code:

Please advise, thanks!

[BSS-Commerce]

Hello @empiricalarby ,

I checked your website and they work fine on Android devices. The fact that they do not work on IOS devices, is because IOS has some properties that require the "-webkit-" prefix. You can try changing and checking again. The reason why the image on the banner is zoomed is because your background-size attribute is for cover. You can convert it to contain but that will give the banner more space. I don't think it's a concern that the photos are zoomed in because they still look great. Here is the image I saw on your website for Android device:

[empiricalarby]

Unfortunately on iOS, it's so far zoomed in it's impossible to tell what the image is. Any idea how to solve this? Thanks

 

[BSS-Commerce]

Hey @empiricalarby 

I tried to find a solution to your problem. The result is that the banner part does not work as expected because background-attachment: fixed;. Since iOS 7, Apple has disabled this attribute due to the high cost. So I give you 2 solutions as follows:

- First method: do not apply background-attackment to iOS devices. Please change your code style to

#shopify-section-template--16982408331515__4938a73e-1164-49e8-bf7e-9c9ef4ff4938 .banner__media {
    background-image: url(https://empiricalwater.com/cdn/shop/files/New_b9891b18-5626-46fa-833a-46437fa9fbe1.jpg?v=1700516265&width=2500);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 400px;
}

Then add the following code to the theme.liquid section:

<script>
function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
let isIOS = iOS();
if (!isIOS) {
 document.querySelector("#shopify-section-template--16982408331515__4938a73e-1164-49e8-bf7e-9c9ef4ff4938 .banner__media").style.backgroundAttachment = "fixed"
}
</script>

- Or you can redo another banner without using the background-attachment attribute
Here are the results:

 and parallax effect still works normally on desktop as well as android devices.

[empiricalarby]

I am having trouble following the first method.

What did I do wrong here? Thanks

[BSS-Commerce]

Hey @empiricalarby ,

Sorry for this inconvenience. It seems we didn't understand each other. So I'll show you the details:

Please delete all the code in the blue paragraph below:

Then paste the following code there:

<style>
#shopify-section-template--16982408331515__4938a73e-1164-49e8-bf7e-9c9ef4ff4938 .banner__media {
    background-image: url(https://empiricalwater.com/cdn/shop/files/New_b9891b18-5626-46fa-833a-46437fa9fbe1.jpg?v=1700516265&width=2500);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 400px;
}

#shopify-section-template--16982408331515__4938a73e-1164-49e8-bf7e-9c9ef4ff4938 .banner__media img {
opacity:0;
}
</style>

<script>
function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
let isIOS = iOS();
if (!isIOS) {
 document.querySelector("#shopify-section-template--16982408331515__4938a73e-1164-49e8-bf7e-9c9ef4ff4938 .banner__media").style.backgroundAttachment = "fixed"
}
</script>

[empiricalarby]

Hi there, sorry to bother again. Can you check that I've done it correctly?

I'm not seeing any kind of parallax effect yet. All I notice is a slightly different placement of the image. Thank you

[silkybts]

Hello! 

I'm having a similar issue where my parallax effect is applied to the entire background of my site. 

It looks fine on the computer and mobile previews on Shopify, but on my iPhone it is a scrolling (i.e. non-parallax), very zoomed in version. 

Side note; on my home page there are spaces between my sections where the parallax effect has not been applied to (looks like solid blocks moving over my background) - might you know how to remove these? 

My website URL is www.silkyloungewear.com

Thanks for all your help!

Lydia