jQuery Mobile IOS apenas rolagem elástica acontecendo enquanto não está na parte inferior da página
TLDR; Tudo funciona bem, a menos que eu tente rolar a página com o toque inicial dentro de uma div de rolagem horizontal, porque a página tem o efeito de rolagem elástica enquanto não está na parte inferior ou superior. A remoção do jQuery Mobile corrige esse problema. Isso só está acontecendo no IOS, o Android está bem.TLDR;
Estou tendo um problema com o jQuery Mobile e a rolagem.
Eu tenho uma página que é maior que minha tela (no iPhone 5s). Esta página possui 2 divs de rolagem horizontal com imagens.
As divs de rolagem são as seguintes
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;}
Essa rolagem funciona bem horizontalmente, mas quando tocodentro uma dessas divs e abra a tela para rolar a página para baixo, a página tem o efeito de rolagem elástica (consulte as imagens). Rolar a página para baixo funciona para descobrir se meu toque começa fora da div horizontal.
Primeira visualização da páginaRolagem elástica acontecendo quando a página não está na parte inferiorNo final da página realRolagem elástica acontecendo quando a página não está no topoRolar para cima e para baixo na página só é possível quando o toque começa fora da div de rolagem horizontal. Se eu remover o jQuery Mobile, esse problema não ocorrerá mais. Acredito que tenha algo a ver com os eventos vmouse do jQuery Mobile. Mas não sei ao certo e não tenho certeza se posso remover esses manipuladores de eventos e se a página ainda funciona com o jQuery Mobile.
Formulário, tanto quanto eu posso dizer isso só está acontecendo no IOS. Eu tentei e telefone Android e tudo funciona como esperado.
Estou preso há um tempo e não consigo descobrir o que mais posso fazer para corrigi-lo. Todas as idéias são úteis. Obrigado por olhar!
Para quem quiser uma demonstração, aqui estão alguns que eu estou hospedando. Eu os teria colocado no jsfiddle, mas o jsfiddle não suporta a configuração da viewport para a página móvel renderizar corretamente.
Página com o jQuery Mobile, quenão trabalhosMesma páginasem jQuery Mobile quefaz trabalhos