I bordi scompaiono in Chrome quando si ingrandisce

Question

Ho questa forma davvero semplice: http://jsfiddle.net/TKb6M/91/. A volte, quando eseguo lo zoom avanti o indietro utilizzando Chrome, i bordi di input scompaiono. Per esempio, quando ho ZOOM per il 90% ottengo:

Naturalmente, la vostra situazione potrebbe essere diversa.

Nel caso vi stiate chiedendo di quei tag <span>, li ho aggiunti seguendo la raccomandazione allo How do I make an input element occupy all remaining horizontal space?.

C'è un problema con il mio CSS o si tratta di un bug di Chrome? Sembra funzionare bene su Firefox. Cosa posso fare per evitare questo comportamento?

Grazie.

Answer 1

Stai forzando Chrome a eseguire calcoli subpixel e questo di solito ha comportamenti strani.

Se si modifica l'altezza dell'ingresso su 30px, uno zoom del 90% funziona correttamente (poiché è 27 px), ma uno zoom non è del 75% (perché è 22,50 px).

È inoltre possibile evitare questo dando una larghezza di 3 pixel al bordo. In questo caso, vedrai che la larghezza dei bordi è diversa in luoghi diversi.

In ogni caso, la soluzione migliore è di dare più spazio intorno agli ingressi in modo che il bordo possa essere disegnato in modo pulito anche se si trova in una posizione subpixel.

Answer 2

È perché l'impostazione di un'altezza fissa, e quando lo zoom l'input è in crescita superiore a tale altezza, facendo sparire il confine. Usa line-height e imbottitura per ottenere l'altezza desiderata, invece - vedi updated Fiddle

Aggiornamento: ignorare ciò che ho detto, è perché si sta impostando overflow:hidden sul vostro arco, eliminando che dovrebbe fare il trucco. Potrebbe tuttavia comportare la necessità di modificare la larghezza dell'ingresso.

Su una nota a margine; stai rendendo il tuo span un elemento di blocco che va bene e funziona, ma sembra un po 'male. Prova a utilizzare gli elementi di blocco, ad esempio invece di modificare un elemento in linea in un blocco, se possibile.

Answer 3

In caso di overflow: nascosto è necessario, menzionare overflow: nascosto solo per il browser si sta affrontando il problema di larghezza. In altri browser, display metion: flex in modo che la larghezza sia automaticamente presa corretta e anche, in modo che lo zoom in/out i bordi non scompaiano.

Ad esempio: larghezza non era corretto nel mio caso solo per IE, così ho detto:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
.spanStyles { 
display: block; 
overflow: hidden; 
} 
} 

E lo zoom in/out problema è stata verificano nelle Firefox e Chrome, così ho detto

.spanStyles { 
display : flex; 
} 

risolto il problema in tutti i browser.