Android Browser上的CSS溢出和绝对定位问题怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

我们有一个使用JQuery Mobile,PhoneGap和ASP.net MVC构建的移动Web应用程序。无论浏览器如何,该应用都可以在iOS和Android设备上运行。我们已经在下面列出的设备上测试了该应用,并且似乎没有任何问题可以正常工作:

iOS 5 - iPad,iPhone。

Android 4.1.2 - 谷歌Nexus 7,三星Galaxy S3,三星Galaxy Note 2,三星Galaxy Tab 2。

Android 4.0.3 - 华硕变压器选项卡

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

目前不可能删除绝对位置,因为它会导致布局完全重新设计,我们只剩下几天发布。那么任何人都可以为此提出一个快速解决方案?

提问于
用户回答回答于

我不知道它为什么起作用,但添加-webkit-backface-visibility:hidden; 到你的风格将解决它。

用户回答回答于

改为使用overflow-x和/或overflow-y属性。

例如 :

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

扫码关注云+社区

领取腾讯云代金券