使用-webkit-transform缩放输入框

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/