使用 -webkit-transform 缩放输入框答案

【问题标题】：Scaling input boxes with -webkit-transform使用 -webkit-transform 缩放输入框
【发布时间】：2012-02-05 05:54:44
【问题描述】：

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

【问题讨论】：

为什么需要缩放输入？如果它的父级被缩放，也许你可以用 scale(1.5) “取消缩放它”，但通过 width height 和 font-size 让它看起来更小。
你不能在输入元素上设置一个更小的宽度/高度/字体大小吗？
+1 我很想知道是否有人能想出解决这个问题的方法。我碰巧正在做一个可以使用这个功能的项目。

【解决方案1】：

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

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

left: -2000px;
position: absolute;

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回复！我拥有的是一个包含多个输入框的 div 标签，这些输入框需要使用 iPad 上的捏事件进行缩放。如果我更改每个输入框的实际宽度和高度，它根本就不平滑。我获得平滑捏合缩放体验的唯一方法是使用 css 变换。
是的，记住 CSS 过渡是硬件加速的。如果您正在寻找捏合来缩放，那么您需要聆听手势并使用过渡，您可以将宽度更改为手势结束时轻按之间的差异。
这很好。我让它与转换一起工作，但使用 CSS 转换可能是一个不错的选择。谢谢。