Absolute positioned image in fixed position container shifting on smart phone browsers

I setup a very stripped-down and cleaned-up (this is WordPress) version of my test website to demonstrate an issue I am having, this is the URL:
http://bam.bbdesign.com/test.htm

This is the key part of the HTML:

<div id="bgmain">
      <div class="bgmainwrap"><img class="rwdimage" src="/img/bg_home-1.jpg" /></div>
</div>

#bgmain is a fixed position container with width:100% and height:100%
.bgmainwrap is a container (the full version of this site has other content within it)
.rwdimage is an absolute positioned image with varying width, height, top and left settings

The image is positioned with a combination of CSS and Javascript. I was not able to do exactly what I wanted with CSS, but all the Javascript does is apply width, height, top and left CSS values based on various screen criteria.

On a desktop browser, the site works fine. The problem is on smart phones. I have found the problem on my iPhone and also on a Samsung device. If you scroll up and down by touch-move, everything works nicely. But, if you "flick" your finger and the momentum/inertia scrolling kicks in, once momentum/inertia stops, then the image zooms in somewhat and repositions itself.

The attached screenshots show exactly what I mean. In "good.jpg", that is what I want. "bad.jpg" shows the image larger than its supposed to be (after momentum/inertia following a "flick" of my finger).

There is no change in the CSS and my Javascript function is not triggered when this happens. The resize/repositioning of the image seems to be the device reacting to the CSS only.

Can anyone explain why this is happening?

Thank you!
good.jpg
bad.jpg
Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
I can recreate the "bad.jpg" on my desktop browser by simply scrolling down.  Over here, that behavior is caused by essentially empty elements present after #bgmain is closed.
0
Brad BansnerWeb DeveloperAuthor Commented:
Really? I've tested with Firefox, Safari and Chrome, and I can't reproduce that effect on a desktop browser. What are you using? I'm not seeing any case where simply scrolling causes the image to resize/reposition. But I'm interested in knowing how that is happening for you, as that might be a major clue in figuring out why its happening on smart phones.

Thank you.
0
Steve BinkCommented:
I'm using latest stable Chrome.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Brad BansnerWeb DeveloperAuthor Commented:
I am testing with:

Mac OS-X Chrome 42.0.2311.135 (64-bit)
Windows Chrome 39.0.2171.95 m

I don't see the behavior in either one.

To be 100% clear about what I'm looking for, it is a change in the zoom/position of the background image on scroll. Not when you change the dimensions of your browser window (which is intentional and part of the responsive design).

The two screenshots I gave (good.jpg and bad.jpg) show the difference in the background image on a scroll event on my iPhone and Samsung devices. I'm not so concerned about the exact zoom/position of the background image, so much as the fact that it is changing on scroll. It looks like a mistake to the user, to have it jumping around like that.

Thanks again for looking!
0
Steve BinkCommented:
I understand.  My desktop is not exhibiting the behavior you are looking for.  My Samsung Galaxy S5 does, though, also using latest Chrome.  However, the resizing effect happens on my phone with a slide or a flick.

I'm *guessing* it has something to do with the Chrome header/URL bar disappearing on scroll, which would change the detected screen size.  This theory is supported by the fact that Firefox for Android (fresh install) exhibits the same behavior on flick or scroll, while CM Browser (also fresh install) does not.  CM Browser's chrome frame does not change while interacting with the page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David S.Commented:
I agree with Steve. That seems to be the most likely cause. Good catch Steve!

Now as to how to fix that, I'd suggest using JavaScript to check for differences in some combination of window.innerHeight, window.outerHeight, and document.documentElement.clientHeight.
0
Brad BansnerWeb DeveloperAuthor Commented:
I'm currently investigating iScroll JS, which seems to have promise. Override native scrolling
0
Brad BansnerWeb DeveloperAuthor Commented:
Thanks for your help! I think your hunch was correct, Steve. I don't know what else it could be. I got rid of native scrolling altogether, that is the only thing that seems to solve it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.