Bordes desaparecen en Chrome cuando hago zoom en

Question

Tengo esta forma realmente simple: http://jsfiddle.net/TKb6M/91/. A veces, cuando acerco o alejé usando Chrome, los bordes de entrada desaparecen. Por ejemplo, cuando el zoom al 90% me sale:

Naturalmente, su experiencia puede variar.

En caso de que se esté preguntando sobre las etiquetas <span>, las agregué siguiendo la recomendación al How do I make an input element occupy all remaining horizontal space?.

¿Hay algún problema con mi CSS o es este un error de Chrome? Parece que funciona bien en Firefox. ¿Qué puedo hacer para evitar este comportamiento?

Gracias.

Answer 1

Está forzando a Chrome a hacer un cálculo de subpixel, y esto generalmente tiene comportamientos extraños.

Si cambia la altura de la entrada a 30px, entonces un zoom del 90% funciona bien (porque esto es 27px), pero un zoom del 75% no (porque esto es 22.50 px).

También puede evitar esto dando al borde un ancho de 3px. En este caso, verá que el ancho de los bordes es diferente en diferentes lugares.

De todos modos, la mejor solución es dar más espacio alrededor de las entradas para que el borde se pueda dibujar limpiamente incluso si está en una posición subpixel.

Answer 2

Esto se debe a que establece una altura fija, y al hacer zoom, la entrada crece más que esa altura, haciendo que el borde desaparezca. Uso line-height y el relleno para conseguir la altura deseada en lugar - ver updated Fiddle

Actualización: ignorar lo que he dicho, es porque se está configurando overflow:hidden en su palmo, quitando que debe hacer el truco. Podría resultar en una necesidad de cambiar el ancho de entrada.

En una nota lateral; estás haciendo de tu tramo un elemento de bloque que está bien y funciona, pero se ve un poco mal. Intente usar elementos de bloque, como un en lugar de cambiar un elemento en línea a un bloque, si es posible.

Answer 3

En caso de desbordamiento: oculto es necesario, mencionar desbordamiento: oculto solo para el navegador que está enfrentando el problema de ancho. En otro navegador, pantalla de metion: flexión para que el ancho se tome automáticamente correcto y también, para que al acercar/alejar los bordes no desaparezcan.

Por ejemplo: anchura no era correcta en mi caso sólo para IE, así que mencionar:

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

Y el zoom in/out tema fue que ocurren en Firefox y Chrome, por lo que mencionado

.spanStyles { 
display : flex; 
} 

esto resolvió mi problema en todos los navegadores.