A recent project involved building a website for a new client, but there seems to be an issue with the background rendering on his iPad and iPhone. The image is displaying incorrectly, showing only a small portion from the top right corner rather than the full picture.
Interestingly, the website looks fine on my PC, Android phone, and in browser emulators, but on his Apple devices, there are layout problems and a strange scrollbar appearing at the bottom of the iPad.
Below is the code snippet I used for setting the background image:
#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 how the website should look on a phone (link to image).
https://i.sstatic.net/nah9r.jpg
I also had a friend with an iPhone take a screenshot, which revealed the issue more clearly(link to image).
It appears to be a compatibility issue with iPads and iPhones, but unfortunately, I don't have access to those devices for testing. If you'd like to investigate further, you can visit the website at