Масштабирование полей ввода с помощью -webkit-transform

Я применил следующее преобразование 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/