Search code examples
cssiphoneipadbackground-imagerender

iPad & iPhone background image rendering issue

I have built a website for a new client recently and on his iPad as well as his iPhone it renders the background image weirdly. Basically what its doing is taking a small portion of the actual image from the top right (I would say about 300px width and 250ph height) and just displaying that from 100% width and 100vh.

Naturally it looks quite bad and all pixelated. On my pc, my android phone and on the browserstack emulator it comes up as it should do showing the full image. From what I remember seeing it there is also some layout issues and it has a scrollbar on the bottom of his iPad.

The code I am using to render the image is as follows...

#fullHeightSection {
    width: 100%;
    height: 100vh;
    position: absolute !important;
    z-index: -1000 !important;
    background-image: url('/wp-content/themes/liveatlvlone/assets/barbg.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

Here is an image of what it should look like off my phone...

enter image description here

I also asked a friend who has an iPhone to take a screenshot and this is what he sent to me just...

enter image description here

Naturally it seems to be a software issue with all iPads and iPhones and I naturally have neither for testing. If you care to have a look for yourself the website is https://www.liveatlevelone.com/

Solution

  • I'd create multiple assets of /wp-content/themes/liveatlvlone/assets/barbg.jpg

    For iOS you can use @2x @3x @4x etc, for retina scaling. If I remember correctly, https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/ is applicable to Safari Web Pages, I think.

    You can also try a different format as well (like PNG), I think it'll work better than jpg (compression).

    You could try adjusting the JPG Compression level, or perhaps opt for SVG format. SVG works better with solid colours, but it may work for the bar pic. I'm unsure.

    enter image description here