mobile - 在移动 webkit 上翻译的 div 内部时输入的奇怪行为

Question

我注意到移动 webkit（移动 safari/android 股票浏览器/chrome）上的文本输入有一个非常奇怪的行为

当输入在被转换的 div（或任何容器）内时（例如具有 -webkit-transform: translate3d(-100%, 0px, 0px);），当输入填充文本时，可见区域为 no更长的时间调整为跟随光标。

请在http://jsbin.com/itodip/2/上查看演示

这只能在移动浏览器中重现！

我在使用已翻译的 div 时发现的唯一解决方法是删除 transitionEnd 上的转换，但这并不理想。

有什么建议和可能的解决方法吗？

Answer 1

我以前遇到过这个错误，我确实找到了解决方法。我所做的是将css“left”属性设置为一个高负数，然后我使用“-webkit-transform”属性将其移回屏幕上可见。出于某种原因修复它。

left: -2000px;
-webkit-transform: matrix(1, 0, 0, 1, 2000, 0);

这是我在上面所做的堆栈溢出帖子的链接：使用 -webkit-transform 缩放输入框