Background Image Issues on iPad

Support
#1

I have several section background images set to “fixed” for desktops and “scroll” for mobile devices. As well, I have different heights set for different devices: 100vh, 80vh, 55vh, etc…

On the responsive viewer in Cornerstone, everything looks and works perfectly fine on every screen size. On my computer and iPhone, it’s the same.

However, on iPads, the background images are blown up incredibly large to the point where only a heavily pixillated corner of the image shows up on the screen.

I can’t figure out what the problem is or why it seems to only be an iPad issue (I’ve tried two generations).

Website is www.theseforeignroads.com

Thanks in advance!

#2

Hi @kerridawn,

Thanks for reaching out.

Parallax should be inactive on mobile devices especially for iOS. It doesn’t work well with CSS’s background fixed styling. https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

I recommend creating multiple sections, one that has parallax and displayed for desktop, and one without parallax and displayed for mobile. Please check this feature for controlling the visibility of sections and elements https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Cheers!

#3

I’m not trying to achieve parallax on iPad or mobile, just a regular background. That’s why I used a media query for anything smaller than a laptop. It works fine on other mobile devices, this is an iPad specific issue.

I would like to avoid adding a duplicate section specifically for mobiles, as loading multiple images will decrease page speed.

#4

Hi @kerridawn,

But I don’t see the @media you’re referring on iPad. That’s why I thought you missed adding it so I provided another workaround that doesn’t require coding.

Which yes, the issue is there because the parallax is still active on iPad. And I think I know the reason why, you only targetted 979px (max-width:979px). iPad resolution could be more than that and even equal to laptop resolution. I recommend increasing that until your preferred resolution.

Thanks!

#5

Ahh, all good now! Thank you so much!

I always thought those dimensions were standard across all devices, didn’t realize there was some room to play.

#6

You’re welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.