Question

我将以下CSS转换应用于HTML输入框。

-webkit-transform: scale(.5);

当我在输入框中键入文本直到它填满可见区域时，插入符号继续经过输入的边缘并被隐藏。通常，插入符号和文本会在您键入时滚动。

一旦插入符号超出预缩放输入的宽度，文本最终会开始滚动。在计算何时滚动文本时，浏览器似乎忽略了缩放。

这只是WebKit浏览器的问题（使用Chrome和iPad测试）。 -moz-transform等效在FireFox中运行良好。 zoom属性在webkit中运行良好，但在iPad上缩放时不够平滑，所以我无法将它用于我的项目。

您可以在此处查看示例：http://jsfiddle.net/4Kv6w/

第一个输入框带有-webkit-transform缩放。第二个框是缩放设置。第三是正常的。

非常感谢任何帮助。

编辑 - 您也可以通过使用-webkit-transform将输入框移到左侧来解决问题而不进行缩放。这是一个例子：http://jsfiddle.net/4Kv6w/15/

Answer 1

使用CSS转换将输入框向左移动时，WebKit似乎存在错误。当您缩小输入框时，它基本上将右边缘向左移动，这就是我遇到问题的方式。

对我来说，解决方法是将输入框定位到左侧

left: -2000px;
position: absolute;

然后使用CSS转换将其移回。

-webkit-transform: matrix(.5, 0, 0, .5, 2000, 0);

您可以在此处查看示例：http://jsfiddle.net/4Kv6w/17/

Answer 2

嘿，我假设你正试图让变化变得活跃起来。如果是这种情况，您可能会使用CSS转换而不是转换获得更好的结果。我已经为你创造了一个小提琴，可以自己试一试。

基本上，我有一个js事件监听器在文本框获得焦点时进行监听。然后我改变js中的宽度，转换处理动画。希望这可以解决您的问题。