Question

我运行了这个webapp，它几乎是一个可以在您的网站上实现的聊天窗口小部件。 DOM结构如下

<html>
  <head>
  </head>
  <body>
   <iframe1 ../> // chat body
   <iframe2 ../> // chat toggle
  </body>
</html>

在移动浏览器上看起来像这样：

在最底部，我们有一个textarea元素。点击它后，移动设备的虚拟键盘就会打开，看起来如下：

一旦开始输入并尝试选择文本本身，您会看到光标位置偏移。据我所知，这只发生在iPhone 6移动Safari上。所有其他经过测试的移动设备/浏览器似乎都能正常运行。

我发现了一个相关的问题，在此处进行了描述：https://github.com/18F/web-design-standards/issues/277

我意识到如果你把手指放在textarea字段上并尝试向下滚动页面（有时可以正常工作），那么就好像光标位置卡在其位置上，而其余部分在网页上滚动。

当您设法向下滚动应用程序以使textarea位于当前带有 x 的宽按钮的位置时，光标位置似乎与您输入的文本对齐。

包含textarea的底部容器构建如下：

   <div class="container"> // position fixed to the bottom of iframe1
      <div class="container2"> // position relative
         // menu button positioned absolute
         // textarea field positioned with margin to each side
         // file icon positioned absolute
      </div>
   </div>

iPhone 6移动Safari游标位于textarea字段中的位置

0 个答案: