[Support request] iOS Fixed Background Image Scroll

Home Forums Support iOS Fixed Background Image Scroll

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1450488
    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

    #1450788
    David
    Staff
    Customer Support

    Hi there,

    do you mean the Page Hero images ?

    #1450837
    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.

    #1450867
    David
    Staff
    Customer Support

    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.

    #1451605
    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

    #1451783
    David
    Staff
    Customer Support

    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.

    #1451950
    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 🙁

    #1451987
    David
    Staff
    Customer Support

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.