Scaling input boxes with -webkit-transform

Question

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/

Answer 1

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

left: -2000px;
position: absolute;

and then move it back with the CSS transform.

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

You can see an example here: http://jsfiddle.net/4Kv6w/17/

Answer 2

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.