TLDR; Все работает нормально, если я не пытаюсь прокрутить страницу вниз с помощью моего касания внутри горизонтальной прокрутки, потому что страница имеет эффект упругой прокрутки, а не внизу или вверху. Удаление jQuery Mobile устраняет эту проблему. Это происходит только в IOS, Android в порядке.TLDR;

У меня проблема с jQuery Mobile и прокруткой.

У меня есть страница, которая больше, чем мой экран (на iPhone 5s). На этой странице 2 горизонтальных прокрутки с изображениями.

Прокрутка делятся следующим образом

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;}

Эта прокрутка работает нормально по горизонтали, но когда я касаюсьвнутри один из этих divs и потяните вверх по экрану, чтобы прокрутить страницу вниз, страница имеет эффект упругой прокрутки (см. изображения). Прокрутка вниз страницы работает, чтобы найти, если мое касание начинается вне горизонтального деления.

Первый просмотр страницы

Упругая прокрутка происходит, когда страница не внизу

В фактической нижней части страницы

Упругая прокрутка происходит, когда страница не наверху

Прокрутка вверх и вниз по странице возможна только тогда, когда касание начинается за пределами горизонтальной прокрутки div. Если я удаляю jQuery Mobile, эта проблема больше не возникает. Я считаю, что это как-то связано с событиями jQuery Mobile. Но я не смог сказать наверняка, и я не уверен, смогу ли я удалить эти обработчики событий, чтобы страница все еще работала с jQuery Mobile.

Форма, насколько я могу судить, это происходит только на IOS. Я пробовал и андроид телефон и все работает как положено.

Я застрял на этом некоторое время и не могу понять, что еще я могу сделать, чтобы это исправить. Любые идеи полезны. Спасибо за внимание!

Для тех, кому нужна демоверсия, вот некоторые из них, которые я размещаю. Я бы поставил их на jsfiddle, но jsfiddle не поддерживает настройку области просмотра для мобильной страницы для правильного рендеринга.

Страница с jQuery Mobile, котораяне работайТа же страницабез jQuery Mobile, которыйделает работай