css - 使用 -webkit-transform 缩放输入框

Question

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

-webkit-transform: scale(.5);

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

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

这只是 WebKit 浏览器的问题(已通过 Chrome 和 iPad 测试)。 -moz-transform 等效项在 FireFox 中运行良好。缩放属性在 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/