[Resolved] Fixed Images Not Displaying Properly on iPad Pro / Tablets

Home Forums Support [Resolved] Fixed Images Not Displaying Properly on iPad Pro / Tablets

Home Forums Support Fixed Images Not Displaying Properly on iPad Pro / Tablets

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1819103
    Ethan

    Hi GeneratePress-

    I’ve been working on page elements in GP using GenerateBlocks.

    My problem is with fixed images not displaying properly on tablets, ie: iPad Pro. Everything looks great in developer modes, however, when I look at it on my iPad the background image doesn’t scroll at all and is displayed with heavy pixelation.

    The caveat is: If I switch the background image to “scroll” they will display properly, however, then I lose the obvious cool desktop “fixed background” effect.

    Here is a link to the website:
    https://testing.customcoatinginnovations.com/

    Here is a link to how it looks on my iPad:
    https://testing.customcoatinginnovations.com/wp-content/uploads/2021/06/IMG_6546.jpg

    I have searched online and can’t find a solution. Maybe I missed something?

    #1819114
    Ying
    Staff
    Customer Support

    Hi Ethan,

    IOS devices don’t like fixed background images, it’s a known issue.

    You can use this CSS to make the background image scroll on narrower screens:

    @media (max-width: 1050x) {
        .gb-container-f9810efd {
            background-attachment: scroll;
        }
    }

    Let me know if this helps ๐Ÿ™‚

    #1819120
    Ethan

    Hi Ying-

    I understand that IOS devices don’t like fixed backgrounds and I don’t want them to scroll on IOS devices. What I would like is the image to not display as pixelated on my tablets. It displays fine on my iPhone but not my iPad.

    #1819201
    Ying
    Staff
    Customer Support

    I know, when the ackground-attachment set to scroll, the issue should be gone.

    But I don’t have an iPad to test, I edited the previous CSS so it works on a screen narrower than 1050px in width, eg. iPad Pro.

    Meanwhile, I noticed the image is 1.8 MB which will cause a loading speed issue, I would recommend compress it before uploading.

    You can use a website tool like this: https://compressjpeg.com/

    Let me know how it works.

    #1819292
    Ethan

    Hi Ying-

    The code you provided did not help and the image remains pixelated.

    As I mentioned from the beginning; I would rather keep the “cool fixed background image” effect on my desktop, and try to find a solution to the background image being pixelated on my iPad, rather than setting all the images to “scroll.”

    This is a test site: I have three sizes of this image, resized in Photoshop, and all of them behave the same, pixelated on iPad.

    Is there a solution to this problem that I have missed? I have read similar threads about these problems but keep coming up empty handed with answers.

    #1819342
    Ying
    Staff
    Customer Support

    The scroll is overriding by the fixed, try this one instead:

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

    The CSS won’t affect the fixed cool effect on desktop, it only applies to smaller screens like tablets and mobiles.

    #1819670
    Ethan

    Yes. I tried this previously. I even put that “px” in there in case it made a difference. I’ve also tried adding a background-size element. Nothing has worked.


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

    #1819987
    Ying
    Staff
    Customer Support

    Sorry for the typo, but as I can see the new CSS has not been added on the site yet, could you clear your cache?

    If still doesn’t work, could you disable the cache plugin after clearing the cache? Thanks!
    https://www.screencast.com/t/bi8N59BZD

    #1820890
    Ethan

    Ying-

    This is great. I added the CSS back in, cleared the cache and disabled the WP-Fastest Cache plugin. Everything is displaying properly, on all devices, even after re-enabling the plugin. I will let you know if any more problems persist.

    This is the code that worked:

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

    I really appreciate the suggestion. In the end, I’m not surprised that the WP-FC plugin is the culprit. This is a turning point as I try and design more with GeneratePress elements & GenerateBlocks and less with bloated page builders such as Elementor. Thank you for the help!

    #1821968
    Ying
    Staff
    Customer Support

    Glad to hear that and you are welcome ๐Ÿ™‚

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