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

Question

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

当输入在转换的div（或任何容器）内时（例如，有-webkit-transform：translate3d（-100％，0px，0px）），当输入用文本填充时，可见区域不再调整为跟随光标。

请参阅http://jsbin.com/itodip/2/

上的演示

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

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

有任何建议和可能的解决方法吗？

Answer 1

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

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

这是我在其上执行的堆栈溢出帖子的链接：Scaling input boxes with -webkit-transform