[Support request] iOS Fixed Background Image Scroll

[Gary]

I have two fixed background cover images on my mobile page and it works fine on Android, but is broken on iOS. I have looked around on this forum and tried the following CSS:

@media (max-width: 768px) {
    .gb-container {
        background-attachment: scroll !important;
    } 
}

Sadly, it hasn’t worked. Also, on Apple phones there seems to be a grey vertical column down the right-hand side of the screen.

I’m wondering whether you have come across this before and have any suggestions. Thanks, Gary

[David]

Hi there,

do you mean the Page Hero images ?

[Gary]

Hi David,

No, the page hero parallax image works fine.

I have two Cover images inside the page (not on the Desktop, they are mobile only). I have set these ‘cover’ images to ‘fixed background’ so the text smoothly scrolls over the pictures and people scroll the screen on their phone. It is working perfectly on Android, but is broken on iOS.

[David]

If they are mobile only then why not simply deselect the parallax option?

If not then you need to target the cover block as that is the element where the image exists.

ie>

@media (max-width: 768px) {
    .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
        background-attachment: scroll !important;
    } 
}

Alternatively why not just add the Background image to the Container block and not use the Cover block at all. You can set Container blocks to a min height.

[Gary]

Thanks David. I think I have underlying problems on the site as I am unable to add a background image in the container. Each time I press ‘Set Background Image’ for the container, it opens up a media popup to set a featured image for the page. I have no idea whether this is a GP issue or a Gutenberg Block issue.

Generatepress: Version: 3.0.0-beta.1
GP Premium: Version: 1.12.0-beta.1

[David]

We saw this issue elsewhere before.
I recall it being a plugin conflict. Can you try temporarily disabling all other plugins aside for GPP and GB.

let us know.

[Gary]

Hi David,

Yep, you are right. I have found the culprit.

It is the Google Amp (Version 2.0.3). I think I might abandon AMP pages for now as I am busy changing all my pages to completely remove Elementor from my site, so as I will only be using the GP, the pages should be light enough without AMP.

Sadly, however, even using the Background Image in a Container, the parallax function (attachment: fixed) still doesn’t work with Apple phones. It is perfect on both the desktop and Android mobiles. Baffling 🙁

[David]

The cover block is still being used and that is using some other code for the Parallax effect – which cannot be overridden with just some CSS by the looks of it.

Fixed Backgrounds on the GB Container Block will be removed on mobile in the next update.
In the meantime your original CSS should apply here.

[Author]

Posts