Escalar cuadros de entrada con -webkit-transform

Question

Apliqué la siguiente transformación CSS a un cuadro de entrada HTML.

-webkit-transform: scale(.5); 

Cuando escribe texto en el cuadro de entrada hasta que se ha llenado la zona visible, el símbolo de intercalación continúa más allá del borde de la entrada y está oculto. Normalmente, el cursor y el texto se desplazarán mientras escribe.

El texto finalmente comienza a desplazarse una vez que el cursor ha ido el ancho de la entrada preescalada. El navegador parece ignorar la escala cuando se calcula cuándo desplazar el texto.

Esto es solo un problema con los navegadores WebKit (probado con Chrome y iPad). El equivalente de la transformada -moz funciona bien en FireFox. La propiedad de zoom funciona bien en webkit, pero no es lo suficientemente fluida cuando se escala en el iPad, por lo que no puedo usarlo para mi proyecto.

se puede ver un ejemplo aquí: http://jsfiddle.net/4Kv6w/

El primer cuadro de entrada es con el -webkit-transform escala. La segunda caja es con el conjunto de zoom. El tercero es normal.

Cualquier ayuda sería muy apreciada.

EDIT - También puede obtener el problema sin escalar, utilizando -webkit-transform para mover el cuadro de entrada a la izquierda. Aquí hay un ejemplo: http://jsfiddle.net/4Kv6w/15/

Answer 1

Parece que hay un error en WebKit cuando se utiliza una transformación CSS para mover un cuadro de entrada a la izquierda. Cuando reduce la escala de un cuadro de entrada, esencialmente mueve el borde derecho hacia la izquierda, que es la forma en que estaba experimentando el problema.

La solución para mí fue posicionar el camino de entrada a la caja de la izquierda

left: -2000px; 
position: absolute; 

y luego moverlo hacia atrás con el CSS transformar.

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

Se puede ver un ejemplo aquí: http://jsfiddle.net/4Kv6w/17/

Answer 2

Oye, supongo que está intentando animar el cambio. Probablemente tendrá mejores resultados al usar transiciones de CSS en lugar de una transformación, si ese es el caso. He creado un violín para que lo veas y lo pruebes por ti mismo.

jsfiddle

Básicamente, tengo un detector de eventos js escuchando cuando el cuadro de texto recibe el foco. Luego cambio el ancho en js y la transición se ocupa de la animación. Espero que esto solucione tu problema.