ios文本输入：光标放错位置

Question

我有一个带有文本输入元素的网络应用程序：

＆＃13;

＆＃13;

#sendmsg {
  background: none;
  border: 1px solid rgb(211, 211, 211);
  border-radius: 10px 10px 10px 10px;
  outline: 0;
  padding: 3px 20px 3px 5px;
  margin: 0 10px 0 0px;
  text-align: left;
  font: normal normal 400 normal 14px "Source Sans Pro", sans-serif;
  color: #747373;
  height: 1.8em;
  width: 87%;
  background: #FEFEFE;
}

＆＃13;

<input type="text" id="sendmsg" name="chatmsg">

＆＃13;

＆＃13;

＆＃13;

在iOS safari上，输入以这种方式显示：

如何解决错位的游标问题？

Answer 1

这似乎是iOS上的Safari的一个错误。找到了一些类似行为的引用：https://bugs.webkit.org/show_bug.cgi?id=138201

这似乎是在容器内部设置输入框并将溢出设置为滚动的症状。我能够通过一个非常基本的div来复制bug：溢出：滚动，并在其中间输入并且无法找到任何干净的CSS方法来修复它。

用于消除此错误的两种方法是删除页面主体上的溢出滚动的使用，并且1）使标题以其他方式粘贴，2）让标题滚动与iOS上的页面。这些选项是我们想要做的吗？