5

我将以下 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/

4

2 回答 2

2

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

我的解决方法是将输入框放置在左侧

left: -2000px;
position: absolute;

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

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

你可以在这里看到一个例子：http: //jsfiddle.net/4Kv6w/17/

于 2012-01-14T19:45:14.817 回答
1

嘿，我假设您正在尝试为更改设置动画。如果是这种情况，您可能会使用 CSS 转换而不是转换获得更好的结果。我已经为您创建了一个小提琴供您自己查看和尝试。

jsfiddle

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

于 2012-01-12T20:33:23.740 回答