使用-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/

- Andrew Stevens

---

为什么需要对输入进行缩放？如果其父级已经被缩放，或许你可以通过使用scale(1.5)来“取消缩放”，然后通过宽度、高度和字体大小使其看起来更小。 - methodofaction

你能不能在输入元素上设置更小的宽度/高度/字体大小呢？ - Web_Designer

+1 我很好奇是否有人能够想出解决这个问题的方法。我正在处理一个需要这种功能的项目。 - Jonathan McIntire

Answer 1

似乎在使用CSS变换将输入框向左移动时，WebKit存在一个bug。当你缩小一个输入框时，它实际上是将右边缘向左移动，这就是我遇到问题的原因。

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

left: -2000px;
position: absolute;

然后使用CSS transform将其移回。

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

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

- Andrew Stevens

Answer 2

嘿，我猜你想要实现动画效果。如果是这样的话，使用CSS过渡效果可能会比使用变换效果更好。我已经为你创建了一个jsfiddle示例，你可以自己试一下。

jsfiddle

基本上，我有一个js事件监听器来监听文本框获取焦点的情况。然后我在js中改变宽度，过渡效果就会处理动画效果。希望这能解决你的问题。

- Alex Morales

---

谢谢您的回复！我有一个包含多个输入框的div标签，需要使用iPad上的pinch事件进行缩放。如果我改变每个输入框的实际宽度和高度，那么效果并不流畅。我唯一得到流畅的捏合缩放体验的方法是使用CSS变换。 - Andrew Stevens

是的，记住CSS过渡是硬件加速的。如果你正在寻找捏合缩放功能，那么你需要监听手势，并使用过渡，你可以将宽度更改为手势结束时的敲击差异。 - Alex Morales

这是一个很好的观点。我已经使用变换使其工作，但使用CSS过渡可能是一个不错的选择。谢谢。 - Andrew Stevens