html - ios文本输入: cursor misplaced

Question

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

#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;
}

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

在 iOS safari 上，输入是这样显示的:

我该怎么做才能解决错位的光标问题？

Answer 1

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

这似乎是在溢出设置为滚动的容器内有一个输入框的症状。我能够用一个非常基本的带有溢出的 div 来复制这个错误:滚动，并且在它的中间有一个输入，并且还没有找到任何干净的 css 方法来修复它。

消除此错误的两种方法是取消在页面主体上使用溢出滚动，或者 1) 以其他方式使标题保持粘性，2) 让标题与iOS 上的页面。这些选项是我们想要做的吗？