Ridimensionamento delle caselle di input con -webkit-transform

Question

Ho applicato la seguente trasformazione CSS a una casella di input HTML.

-webkit-transform: scale(.5); 

Quando si digita testo nella casella di input finché non ha riempito la zona visibile, il cursore continua oltre il bordo di ingresso ed è nascosto. Normalmente il segno di omissione e il testo scorreranno durante la digitazione.

Il testo inizia a scorrere quando il cursore ha assunto la larghezza dell'ingresso pre-ridimensionato. Il browser sembra ignorare il ridimensionamento quando si calcola quando scorrere il testo.

Questo è solo un problema con i browser WebKit (testato con Chrome e iPad). L'equivalente di -moz-transform funziona bene in FireFox. La proprietà dello zoom funziona bene nel webkit, ma non è abbastanza uniforme quando si ridimensiona l'iPad, quindi non posso davvero usarlo per il mio progetto.

Si può vedere un esempio qui: http://jsfiddle.net/4Kv6w/

La prima casella di input è con la scala -webkit-trasformare. La seconda casella è con lo zoom impostato. Il terzo è normale

Qualsiasi aiuto sarebbe molto apprezzato.

EDIT - È anche possibile ottenere il problema senza ridimensionamento, utilizzando -webkit-transform per spostare la casella di input a sinistra. Ecco un esempio: http://jsfiddle.net/4Kv6w/15/

Answer 1

Sembra che ci sia un bug in WebKit quando si usa una trasformazione CSS per spostare una casella di input a sinistra. Quando ridimensionate una casella di input, essenzialmente sposta il bordo destro a sinistra, che è il modo in cui ho riscontrato il problema.

La soluzione per me è stato quello di posizionare il modo di immissione a sinistra il

left: -2000px; 
position: absolute; 

e quindi spostarlo di nuovo con il CSS trasformare.

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

È possibile vedere un esempio qui: http://jsfiddle.net/4Kv6w/17/

Answer 2

Ehi, presumo che tu stia cercando di animare il cambiamento. Probabilmente otterrai risultati migliori usando le transizioni CSS anziché una trasformazione, se così fosse. Ho creato un violino per te da vedere e provare per te stesso.

jsfiddle

Fondamentalmente, ho un listener di eventi js ascolto per quando la casella di testo viene messa a fuoco. Poi cambio la larghezza in js e la transizione si prende cura dell'animazione. Spero che questo si occupi del tuo problema.