5

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/

Andrew Stevens
  • 635
  • 5
  • 13
  • Why do you need to scale the input? If its parent is scaled, perhaps you could "unscale it" with scale(1.5) but make it appear smaller through width height and font-size. – methodofaction Jan 08 '12 at 07:43
  • Couldn't you just set a smaller width / height / font-size on the input element? – Web_Designer Jan 08 '12 at 07:54
  • +1 I'm curious to see if someone can come up with a workaround to this problem. I happen to be working on a project that could use this functionality as well. – Jonathan McIntire Jan 09 '12 at 17:34

2 Answers2

2

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/

Andrew Stevens
  • 635
  • 5
  • 13
1

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.

Alex Morales
  • 1,166
  • 9
  • 13
  • Thanks for your response! What I have is a div tag containing multiple input boxes that need to be scaled using the pinch event on the iPad. If I change the actual width and height of each input box, it isn't smooth at all. The only way I've gotten a smooth pinch-to-zoom experience is by using a css transform. – Andrew Stevens Jan 14 '12 at 18:37
  • Yeah, remember CSS transitions are hardware accelerated. if you're looking for a pinch to zoom then you need to listen for the gesture and using a transition, you can change the width to be the difference between the taps at the end of the gesture. – Alex Morales Jan 15 '12 at 14:41
  • That's a good point. I got it working with the transform, but using a CSS transition could be a good alternative. Thanks. – Andrew Stevens Jan 16 '12 at 23:39