Background image 'jumping' on iOS (and other?) devices when scrolling

SmugSam

Howdy,

Sorry I have no way of telling this is a problem on other mobile devices. It may be.

I notice that as I scroll my site on my iPhone, the background is resizing with a serious judder. I am fairly certain it is related to the nav bars at the top/bottom of the screen appearing/disappearing as I scroll around, thus changing the effective 'screen size', and the background resizing accordingly.

I have done quite a bit of trial and error, and reading on the web, but haven't found an ideal solution as yet. I do have a workaround (below). To be clear, I have only tested this on older iPhones (3GS/iOS6.1.6 and 4S/iOS7.1) as that is all I have access to. Tools like Screenfly don't help as, although they imitate screen size, they don't imitate these bars appearing/disappearing!

Is anyone else having this issue? Or solved this issue?

I have two workarounds, but they both have issues:

1. Using "height:100vh" instead of "height:100%"- which is better, but results in a much more zoomed background, and it still resizes when a collapsable menu is expanded
2. Setting the background to a static size based on detected screen size. This works ok on the screens I have tested, but it is not a graceful solution that scales across different devices i.e. really I should go through and set a number of different background sizes depending on screen size detected. But it would be much nicer to simply somehow style the background so that it responds more intelligently to the variation in screen size, given that toolbars appearing/hiding are probably going to be more common than less in future.

Currently I have the second workaround in place, albeit rather roughly. Happy to hear any thoughts or approaches anyone else may have taken on this issue!

Sam

Steve Cavigliano

SmugSam wrote: »

Howdy,

Sorry I have no way of telling this is a problem on other mobile devices. It may be.

I notice that as I scroll my site on my iPhone, the background is resizing with a serious judder. I am fairly certain it is related to the nav bars at the top/bottom of the screen appearing/disappearing as I scroll around, thus changing the effective 'screen size', and the background resizing accordingly.

I have done quite a bit of trial and error, and reading on the web, but haven't found an ideal solution as yet. I do have a workaround (below). To be clear, I have only tested this on older iPhones (3GS/iOS6.1.6 and 4S/iOS7.1) as that is all I have access to. Tools like Screenfly don't help as, although they imitate screen size, they don't imitate these bars appearing/disappearing!

Is anyone else having this issue? Or solved this issue?

I have two workarounds, but they both have issues:

1. Using "height:100vh" instead of "height:100%"- which is better, but results in a much more zoomed background, and it still resizes when a collapsable menu is expanded
2. Setting the background to a static size based on detected screen size. This works ok on the screens I have tested, but it is not a graceful solution that scales across different devices i.e. really I should go through and set a number of different background sizes depending on screen size detected. But it would be much nicer to simply somehow style the background so that it responds more intelligently to the variation in screen size, given that toolbars appearing/hiding are probably going to be more common than less in future.

Currently I have the second workaround in place, albeit rather roughly. Happy to hear any thoughts or approaches anyone else may have taken on this issue!

Sam

Hi Sam,
I asked one of our mobile gurus to check this out. He also sees the grey bar and says this is due to the background re-sizing from the web browser tools bar on the bottom. This is the full screen background image and a mobile display. Unfortunately, there's no way to workaround or remove this issue.

Cavig
:cavig

SmugSam

Steve Cavigliano wrote: »

Hi Sam,
I asked one of our mobile gurus to check this out. He also sees the grey bar and says this is due to the background re-sizing from the web browser tools bar on the bottom. This is the full screen background image and a mobile display. Unfortunately, there's no way to workaround or remove this issue.

Cavig
:cavig

Thanks Cavig. I had seen a couple of answers out there on the internet, in general CSS forums (i.e. not SM-specific). But it seems to involve some trickery with CSS by putting the background on a separate DIV then putting that in the HTML. Don't think I've quite explained that correctly, but it is basically putting the background image on a separate layer ABOVE the background, if that makes sense. I've seen people suggesting solutions along these lines:

<div class="background-div"><img src="background.jpg"></div>
CSS:
.background-div {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.background-div img {
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
}

But not sure if this (a) works or (b) is achievable in the world of SM customisation. Seems it may not be a big issue on the Dgrin forums, although I have seen it on other people's sites.

Appreciate your response. I will put this on the "worry about it later" pile.