javascript - jQuery Mobile IOS Only Elastic Scrolling Happening While Not At Bottom of Page issue

Question

TLDR; Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;

I'm having an issue with jQuery Mobile and scrolling.

I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.

The scrolling divs are as follows

HTML:

<div class="list">
    <input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
    <label for="Cover26">
        <span class="check"></span>
        <img src="http://placehold.it/110x170" class="background">
    </label>
</div>

CSS:

.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
    .list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
    .list input{position:absolute;top:-999px;left:-999px;}

This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.

• First view of page

• Elastic scrolling happening when page isn't at bottom

• At actual bottom of page

• Elastic scrolling happening when page isn't at the top

Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.

Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.

I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!

For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.

• Page with jQuery Mobile which doesn't work
• Same page without jQuery Mobile which does work

Answer 1

The problem appears to be caused by the below CSS styles.

#cover-builder-page, #page-builder-page { 
  width:100%;
  height:100%;
}

When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.

Demo ⁽¹⁾

⁽¹⁾ Tested on iPhone 5 - Safari