Background images shift left on mobile scroll

[geoffmartyn]

Hi - I have a site I’ve built where I’m using the background images (set in the classic ‘edit’ mode) in conjunction with the header builder and Pro to provide me with large bold photography across the top of each page.

On mobile devices the background image seems to pop left and reposition on scroll. I don’t think it’s anything to do with the headers, one of which is static and the other, which is sticky as I’ve disabled them and it still happens. I also don’t think it’s to do with the screen width as the image doesn’t pop left even when I emulate and iPhone (for example) in Safari or Chrome. It just seems to happen on the physical device - I’ve also tried via Browserstack and the same thing happens.

I’ve recorded a video of the behaviour on my phone (iPhone 11 Pro Max)

On inspecting the div.backstretch via Browserstack, nothing seems to change to make this happen yet it does.

So I’m scratching my head on this one a bit!

Cooke Aquaculture Scotland

Thank you

Geoff

[marc_a]

Hi Geoff,

Thanks for reaching out!

I suspect it has something to do with the cache, I suggest that you clear your browser’s cache and any 3rd party cache associated on your website then test again. Also test in incognito mode.

If that does not help, please tell us what operating system, OS version, browser and browser version you’re using.

Thanks.

[geoffmartyn]

Thank you for your reply, @marc_a

I’m not sure it can be the cache as it only happens on mobile devices, and I’ve tried several from different locations belonging to different users. I tried it on my iPhone / Safari / iOS 14.7.1, my client also tested it on his iPhone (not sure of the specs), and I also tested it via BrowserStack on a virtual / physical device.

Thank you

Geoff

[ruenel]

Hello Geoff,

This is not a background image issue, rather than a cause of your phone’s browser behavior. Background-images ( cover ) is responsive in a way that it will cover its container. Notice how your viewport become wider/higher when the address bar shrink and the toolbar at the bottom hides. That is when the background images expand themselves to cover the entire container.

Browser viewport when opening the page:

Browser viewport when scrolling the page:

Hope this sheds some light.
Cheers.

[geoffmartyn]

Hi @ruenel - that makes perfect sense. Thank you for the detailed answer.

Cheers

Geoff

[ruenel]

You are most welcome Geoff!