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:
This is the key part of the HTML:
<div class="bgmainwrap"><img class="rwdimage" src="/img/bg_home-1.jpg" /></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
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).
Can anyone explain why this is happening?