使用 -webkit-transform 缩放输入框
我将以下 CSS 转换应用于 HTML 输入框。
-webkit-transform: scale(.5);
当我在输入框中键入文本直到其填满可见区域时，插入符号会继续超出输入的边缘并被隐藏。通常，插入符号和文本会在您键入时滚动。
一旦插入符号达到预缩放输入的宽度，文本最终就会开始滚动。浏览器在计算何时滚动文本时似乎忽略了缩放。
这只是 WebKit 浏览器的问题（使用 Chrome 和 iPad 进行测试）。 -moz-transform 等效项在 FireFox 中运行良好。缩放属性在 webkit 中工作得很好，但在 iPad 上缩放时不够平滑，所以我不能真正将它用于我的项目。
您可以在此处查看示例： http://jsfiddle.net/4Kv6w/
第一个输入框带有-webkit-变换缩放。第二个框带有缩放设置。第三个是正常的。
任何帮助将不胜感激。
编辑 - 您也可以在不缩放的情况下解决问题，方法是使用 -webkit-transform 将输入框移动到左侧。这是一个示例： http://jsfiddle.net/4Kv6w/15/
I applied the following CSS transform to an HTML input box.
-webkit-transform: scale(.5);
When I type text into the input box until it has filled the visible area, the caret continues past the edge of the input and is hidden. Normally the caret and the text would scroll as you type.
The text does eventually start scrolling once the caret has gone the width of the pre-scaled input. The browser seems to be ignoring the scaling when calculating when to scroll the text.
This is only an issue with WebKit browsers (tested with Chrome and iPad). The -moz-transform equivalent works fine in FireFox. The zoom property works fine in webkit, but it isn't nearly smooth enough when scaling on the iPad, so I can't really use it for my project.
You can see an example here: http://jsfiddle.net/4Kv6w/
The first input box is with the -webkit-transform scaling. The second box is with zoom set. The third is normal.
Any help would be greatly appreciated.
EDIT - You can also get the problem without scaling, by using -webkit-transform to move the input box to the left. Here's an example: http://jsfiddle.net/4Kv6w/15/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 CSS 转换将输入框向左移动时，WebKit 中似乎存在错误。当您缩小输入框时，它实际上会将右边缘移动到左侧，这就是我遇到问题的方式。
我的解决方法是将输入框定位到左侧
，然后使用 CSS 变换将其移回。
您可以在此处查看示例： http://jsfiddle.net/4Kv6w/17/
It seems there is a bug in WebKit when using a CSS transform to move an input box to the left. When you scale down an input box, it essentially moves the right edge to the left, which is how I was experiencing the problem.
The workaround for me was to position the input box way to the left
and then move it back with the CSS transform.
You can see an example here: http://jsfiddle.net/4Kv6w/17/
嘿，我假设你正在尝试推动这一变化。如果是这种情况，使用 CSS 过渡而不是转换可能会获得更好的结果。我创建了一个小提琴供您自己查看和尝试。
jsfiddle
基本上，我有一个 js 事件监听器监听文本框何时获得焦点。然后我更改 js 中的宽度，并且过渡会处理动画。希望这能解决您的问题。
Hey I'm assuming you're trying to animate the change. You will probably have better results using CSS transitions instead of a transform if that's the case. I've created a fiddle for you to see and try it out for yourself.
jsfiddle
Basically, I have a js event listener listening for when the textbox gets focus. Then I change the width in the js and the transition takes care of the animation. Hopefully this takes care of your issue.