Background Image Jumps On Mobile

Hi there,

RE. https://www.syrupbee.com/

When viewing my website from my Android Motorola Phone that uses the Google Chrome app, the colourful background image jumps when scrolling down from the top of the page. Once it jumps (a white box appears at the bottom of the screen then it resizes the photo) it then works as it should and stays fixed & static as you scroll down.

Is there any way to stop it from jumping at all?

Chris

PS. this does not occur when I view my website from my laptop screen in any width below 767px…this only happens when using my actual mobile phone.

BUMP

Thank you that’s great! 🙂

I checked it on my iPhone (other phone) and it had the same problem. What happens is that if you scroll right to the top of the screen and then scroll down the background image resizes for a second showing a momentary white horizontal patch on the bottom of the background image.

https://stackoverflow.com/questions/32417663/white-area-on-fixed-background-when-scrolling-on-ios?answertab=active#tab-top

I tried adding ‘transform: translate3d(0,0,0)’ to .backstretch in the custom CSS but that did not help either.

Hi again, apologies for all the messages but just letting you know that, for the time being, I have disabled .backstretch on my mobile website and replaced it with the following code:

@media screen and (max-width: 767px) {
.td-lifestyle {
background-size: auto;
background-attachment: scroll;
background-repeat: repeat;
background-image: url(https://www.syrupbee.com/wp-content/uploads/2018/01/Background-light-grey-e1517274658925.jpg);
background-position: center center;
}
}

This may be an adequate compromise, though it would still be nice finding a way to fix this initial scroll error so I can go back to using my original image that displays on the desktop version of my website.

Thanks,
Chris

Hi there,

As you can see, the little horizontal white box that appears on initial scroll and then, once my thumb leaves the screen, the background image resizes

https://drive.google.com/file/d/0B_swqA44iTqqRk5pcEJaNkh2djZ4NUFGdWVnVTFMN1FnX3pV/view?usp=sharing

Thanks