Android浏览器上的CSS溢出和绝对定位问题 [英] CSS overflow and absolute positioning issue on Android Browser

问题描述

我们有一个使用JQuery Mobile，PhoneGap和ASP.net MVC构建的移动Web应用程序. 该应用程序旨在在iOS和Android设备上运行，无论使用哪种浏览器. 我们已经在下面列出的设备上测试了该应用程序，并且看来运行正常，没有任何问题

We have a mobile web app built using JQuery Mobile, PhoneGap and ASP.net MVC. The app is targeted to run on iOS and Android devices regardless of the browsers. We have tested the app on devices listed below and it seems to work fine without any issues

iOS 5 -iPad和iPhone.

iOS 5 - iPad , iPhone .

Android 4.1.2 -Google Nexus 7，三星Galaxy S3，三星Galaxy Note 2，三星Galaxy Tab 2.

Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.

Android 4.0.3 -Asus Transformer Tab

Android 4.0.3 - Asus Transformer Tab

但是，当在 Samsung Galaxy Note 800 的 Android Stock浏览器和4.1.2上进行测试时，我们遇到了一个非常奇怪的问题.启用滚动时，具有css属性" overflow:auto "的div中的元素(例如子div)不会响应任何触摸事件.这里要注意的主要事情是，包含该div的Parent div的绝对位置为" position:abolute ".经过一段时间的互联网研究后，我们发现绝对位置和溢出属性的组合可能会在Android浏览器上引起一些问题.

But when tested on Android Stock browser of Samsung Galaxy Note 800 with 4.1.2, we encountered a very strange issue. The elements placed in a div (say child div) with css attribute'overflow:auto' do not respond to any touch events while scroll is enabled. The main thing to note here is that the Parent div containing this div is absolutely positioned 'position:abolute'. After researching over the internet for sometime we found that the combination of absolute position and overflow attributes may cause some issues on Android browser.

目前无法删除绝对位置，因为这会导致布局的完全重新设计，并且我们只剩下几天的发布时间.那么，有人可以为此提出快速解决方案吗?

Removing absolute position is not possible at the moment as it is resulting in complete redesign of the layouts and we are left with only few days for the release. So can any one suggest a quick fix for this?

推荐答案

请改用overflow-x和/或overflow-y属性.

EG

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

此外，由于滚动条在触摸设备上隐藏，因此可以使用:scroll而不是:auto.外观相同，但可能不会出现相同的错误.

Also, since scrollbars are hidden on touch devices you can use :scroll rather than :auto. It will look the same but may not be subject to the same bugs.

这篇关于Android浏览器上的CSS溢出和绝对定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！