iOS Chrome浏览器中的虚拟键盘有时会覆盖内容而不是推动视口

时间:2017-02-04 22:59:51

标签: javascript jquery html ios google-chrome

我在iOS上遇到了一个小问题,其中有#34;滚动"在输入焦点后屏幕向下导致键盘模糊页面的底部,用户无法向下滚动以查看下面的元素(这是我有textarea的地方)。这种情况仅发生在iOS Chrome浏览器中,而非Safari。

我要走过这些步骤,尽量让它尽可能清晰。

  • 用户关注textarea输入。行为符合预期:键盘按下屏幕。

  • 如果用户根本没有滚动并轻按输入,那么下次他们将焦点放在textarea中时,此行为将继续(键盘会将整个屏幕向上推)。

    < / LI>
  • 如果用户将屏幕向下拖动以在textarea聚焦时向上滚动(无论它们有多少&#34;滚动&#34;)屏幕具有类似按扣的效果,键盘覆盖底部的内容。此键盘行为将被保留...

  • 每次用户点击进出textarea时,键盘都会以这种方式继续覆盖内容。

  • 我发现重置此效果的唯一方法是在textarea未聚焦时拉起屏幕。这会产生一点闪烁效果,当用户点击textarea时,键盘会返回

我有&#34;滚动&#34;在引号中,因为页面上没有实际滚动,因为高度,正文和表单都是浏览器高度的100%。虚拟键盘实际上只是在第一种情况下将视口推离屏幕。

我在这里制作了一个关于这个问题的视频:https://youtu.be/yD0tjMfy5I8

我无法找到有关为何发生这种情况的任何信息,而且我没有任何运气试图以不同方式设置表单,因为(据我所知),没有办法找到高度键盘打开时的可见区域(window.innerHeight不起作用)

有没有人找到解决这个故障的方法?

0 个答案:

没有答案