У нас есть мобильное веб-приложение, построенное с использованием JQuery Mobile, PhoneGap и ASP.net MVC. Приложение предназначено для работы на устройствах iOS и Android независимо от браузеров. Мы протестировали приложение на устройствах, перечисленных ниже, и, похоже, они работают нормально без каких-либо проблем.
iOS 5 - iPad, iPhone.
Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.
Android 4.0.3 - вкладка Asus Transformer
Но при тестировании в Android Stock browser Samsung Galaxy Note 800 с 4.1.2 мы столкнулись с очень странной проблемой. Элементы, помещенные в div (скажем, дочерний div) с атрибутом css ' переполнения: auto, не реагируют на какие-либо события касания, пока включена прокрутка. Главное здесь отметить, что родительский div, содержащий этот div, абсолютно позиционируется как position: abolute. После некоторого исследования через Интернет мы обнаружили, что сочетание атрибутов абсолютной позиции и переполнения может вызвать некоторые проблемы в браузере Android.
Удаление абсолютной позиции в настоящий момент невозможно, так как это приводит к полной реорганизации макетов, и мы оставляем всего несколько дней для выпуска. Так может ли кто-нибудь предложить быстрое решение для этого?
Вместо этого используйте overflow-x и/или overflow-y.
EG
overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */
Кроме того, поскольку полосы прокрутки скрыты на сенсорных устройствах, вы можете использовать :scroll, а не :auto. Он будет выглядеть одинаково, но может не подвергаться тем же ошибкам.
Я не знаю, почему это сработало, но добавив -webkit-backface-visibility: hidden; к вашему стилю исправит его
Проблема с overflow: auto была/была известной проблемой в браузере Android.
В 2009 году сообщалось о проблеме (см. Здесь). Я думал, что они решили это тем временем. Он был устаревшим. Но люди все еще жалуются, что это не сработает. Если это так, я подозреваю, что они больше не будут исправлять это, поскольку Chrome теперь стал стандартным браузером для Android.
Вы можете использовать библиотеку javascript под названием "iScroll". Он работает с большинством устройств Android и не представляет сложности.
Просто напишите var scrollDiv = new iScroll('divId'); ниже элемента div.
Вот страница проекта: http://cubiq.org/iscroll-4
Как насчет того, чтобы поместить элементы внутри абсолютно позиционированного контейнера в новый div и поместить его относительно?
<div class="absolutelyPositionedParent">
<div class="relativelyPositionedElement"></div>
</div>
<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>