网页表格上的Android浏览器/三星Galaxy SII滚动错误.选择列表hitboxes不滚动

Question

编辑: 我已经向youtube上传了一个视频,展示了这里的错误:http://www.youtube.com/watch？v = zkDYlgtX5Hk

我有一个非常奇怪的错误,我发现在运行Android 4.03 ICS的三星Galaxy S2上测试我的新网络应用程序.

当您在默认Web浏览器中加载表单然后向下滚动页面时,即使表单元素本身已向上滚动,hitbox/touchable区域似乎仍保留在页面首次加载时它在屏幕上的位置屏幕.

据我所知的少数测试设备,我认为这只发生在三星Galaxy S2上,因为我在Android模拟器中尝试使用相同版本的android并且无法复制问题.我知道这使得它成为一个非常具体的用户群,但是最后我检查了Galaxy s2是我国(澳大利亚)最受欢迎的Android手机,所以找到一个修复程序会很高兴.

我在http://users.tpg.com.au/geoffica/test.html创建了一个非常简单的页面来演示这个

您可以通过执行以下操作来复制问题:

1. 在Galaxy S2上加载页面
2. 滚动浏览器,使页面完全填满屏幕,地址栏就在屏幕顶部.
3. 在选择框的位置,将手指放在屏幕一侧,作为选择列表所在位置的标记.
4. 向下滚动页面任何距离,(同时仍然保持选择列表在屏幕上)然后触摸选择列表的空白区域,选项应出现在屏幕上.它可能需要一些尝试才能实现,但它会发生.

现在我知道你认为这很复杂并且可能很少发生,但是在我为客户构建的表单中,因为元素的位置,hitbox总是与表单的提交按钮重叠,使它成为现实很难点击提交按钮.如果命中框重叠,选择列表也会窃取其他选择列表中的触摸,触摸时会显示错误的选项.

我尝试了很多东西,但到目前为止我发现的唯一解决方法是使用touchstart事件来触发我的提交按钮而不是点击事件.这似乎发生在选择列表的单击事件之前,并阻止它首先进入,但这远非理想,并且不会阻止选择列表窃取页面上其他元素的点击.

我还想过滚动我自己的jquery插件,可能会将选择列表放在屏幕外,然后触摸链接或其他东西来触发他们的点击事件.如果它是移动设备,则无论选择的位置如何,选项都将出现在屏幕上.然而,这将非常麻烦,我需要考虑这对来自PC或ipad的用户产生的影响,例如在下拉列表中显示选项.对我来说听起来很有道理.甚至可能需要一些Galaxy s2特定的浏览器/设备嗅探.

除了不使用选择列表之外,有没有人有这方面的真正解决方法？

Answer 1

我认为这可能是您可以使用Jquery-mobile修复的问题 只是简单，因为当您不使用它时，您的网站在移动浏览器上看起来很奇怪

也许这就是解决方案，这只是一个提示:)