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

Question

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

Answer 1

Кажется, есть ошибка в WebKit при использовании преобразования CSS для перемещения поля ввода влево. Когда вы уменьшаете размер поля ввода, оно, по сути, перемещает правый край влево, как я и испытывал проблему.

Обходной путь для меня заключался в том, чтобы расположить поле ввода влево

left: -2000px;
position: absolute;

, а затем переместите его обратно с помощью преобразования CSS.

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

Вы можете увидеть пример здесь: http://jsfiddle.net/4Kv6w/17/

Answer 2

Эй, я полагаю, вы пытаетесь оживить изменения. Вы, вероятно, получите лучшие результаты, используя CSS-переходы вместо преобразования, если это так. Я создал для вас скрипку, чтобы вы могли попробовать и попробовать сами.

jsfiddle

По сути, у меня есть прослушиватель событий js, который прослушивает, когда текстовое поле получает фокус. Затем я изменяю ширину в js, и переход заботится о анимации. Надеюсь, это решит вашу проблему.