Fix for parallax issue on ipads

[kirk74]

Just sharing this solution as I had a lot of trouble with the parallax BG images on iPads, and I couldn’t find this solution on here … the suggested solutions I did find did not work so it might be that they are old solutions now???

I had to work it out myself so sharing here in case it helps someone else…

What was happening:

If I used a BG image with parallax effect, on an iPhone, this would work fine - I would NOT get the parallax effect (but I knew to expect this) … but the image would still show and look correctly sized… BUT - on an iPad, the BG image with the parallax effect would be extremely zoomed in and looked terrible… I had LOADS of parallax BG mages all through the site so I did NOT want to customise a new BG image for different devices and this would just be way too much work, I needed a generic solution. Then the ONLY time I needed to switch the BG image for different devices is when the BG image chosen didn’t work OK at the crop on mobile device.

Adding this to the global CSS (in Appearance > Customise > Custom > Edit Global CSS) wokred perfectly:

 /* This is needed to target iPads in landscape and portrait mode when using PARALLAX BG images  (other non-parallax BG images are fine...) .. parallax on iPhones works without this (it doesn't do parallax effect but it shows the same image as a still, and at the correct scale... , but not iPads .. with iPads, what happens without this code is an ugly extreme zoom in.. this is the only thing that seems to work ... no customisation needed for the individual sections.. just this code in the global CSS..*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
  .x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
 background-attachment:scroll !important;
    background-size: cover;
    height: 100%;
    overflow: hidden;
  
}
}

[XSupport]

Hello @kirk74,

Thanks a lot for sharing this solution, much appreciated.

[kirk74]

no worries! Hope it works as well for others as it did for me! As I wasted a lot of time before working this way out!!

[paul.r]

Thank you! Have a nice day.

[kirk74]

Hello again, Just an update … in my case I have a LOT of parallax BG images in this site, and the image used is not always as large … so I was getting gaps top and/or bottom at certain times in certain browsers … so to fix this issue and also fix the zooming issue and also fix the issue where the parallax image would disappear completely on mobile phones when certain CSS tweaks were added… this was the perfect combination I found:

 /* This is needed to target iPads in landscape and portrait mode when using PARALLAX BG images  (other non-parallax BG images are fine...) .. parallax on iPhones works without this (it doesn't do parallax effect but it shows the same image as a still, and at the correct scale... , but not iPads .. with iPads, what happens without this code is an ugly extreme zoom in.. this is the only thing that seems to work ... no customisation needed for the individual sections.. just this code in the global CSS..*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
  .x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
 background-attachment:scroll !important;
    background-size: cover;
    height: 100%;
    overflow: hidden;
  
}
}

/* this is needed to top the running out of smaller parallax images */
.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
 	background-position: center center !important;
}

[XSupport]

@kirk74 Thanks for sharing this, much appreciated

[kirk74]

no worries, any chance you can help me ASAP with this one, it;s super urgent : https://theme.co/apex/forum/t/essential-grid-image-based-grid-urls-dont-work-in-mobile-instead-same-page-is-refershed/18380

[paul.r]

Hi,

Please refer to that thread, we will answer it shortly.

Thanks