3

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

First view of page

  • Elastic scrolling happening when page isn't at bottom

Elastic scrolling happening when page isn't at bottom

  • At actual bottom of page

At actual bottom of page

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

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.

Adam Merrifield
  • 10,307
  • 4
  • 41
  • 58

1 Answers1

4

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 (1)

(1) Tested on iPhone 5 - Safari

Omar
  • 32,302
  • 9
  • 69
  • 112
  • 1
    This appears to work for me. Thank you very much for taking the time to look and for your answer. :] – Adam Merrifield Jan 13 '14 at 19:23
  • Just one question since I have 8 more hours before I can award bounty anyway. I now want the horizontal divs to scroll behind the buttons and header. Giving the wrapper of the divs a css of `position:absolute;top:140px;right:0;left:0;bottom:0;overflow:auto;` breaks this again. Is that just because it once again has a set height? To get around this I just made the buttons & header fixed and allowed the page to scroll behind it. I'm just curious. Thanks again! – Adam Merrifield Jan 13 '14 at 19:29
  • @AdamMerrifield you're welcome, I'm glad this fixed your problem. You don't need to set absolute position, you can give wrapper a fixed height and `overflow-y: scroll;`. I need to test it, or provide me with a fiddle to test. – Omar Jan 13 '14 at 19:55