Переполнение CSS и проблема абсолютного позиционирования в Android-браузере

У нас есть мобильное веб-приложение, построенное с использованием 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.

Удаление абсолютной позиции в настоящий момент невозможно, так как это приводит к полной реорганизации макетов, и мы оставляем всего несколько дней для выпуска. Так может ли кто-нибудь предложить быстрое решение для этого?

Ответ 1

Вместо этого используйте overflow-x и/или overflow-y.

EG

overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */

Кроме того, поскольку полосы прокрутки скрыты на сенсорных устройствах, вы можете использовать :scroll, а не :auto. Он будет выглядеть одинаково, но может не подвергаться тем же ошибкам.

Ответ 2

Я не знаю, почему это сработало, но добавив -webkit-backface-visibility: hidden; к вашему стилю исправит его

Ответ 3

Проблема с overflow: auto была/была известной проблемой в браузере Android. В 2009 году сообщалось о проблеме (см. Здесь). Я думал, что они решили это тем временем. Он был устаревшим. Но люди все еще жалуются, что это не сработает. Если это так, я подозреваю, что они больше не будут исправлять это, поскольку Chrome теперь стал стандартным браузером для Android.

Ответ 4

Вы можете использовать библиотеку javascript под названием "iScroll". Он работает с большинством устройств Android и не представляет сложности. Просто напишите var scrollDiv = new iScroll('divId'); ниже элемента div. Вот страница проекта: http://cubiq.org/iscroll-4

Ответ 5

Как насчет того, чтобы поместить элементы внутри абсолютно позиционированного контейнера в новый div и поместить его относительно?

<div class="absolutelyPositionedParent">
    <div class="relativelyPositionedElement"></div>
</div>

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>