html - Los bordes desaparecen en Chrome cuando me acerco

css border

Question

Tengo esta forma realmente simple: http://jsfiddle.net/TKb6M/91/ . A veces, al acercar o alejar la imagen utilizando Chrome, los bordes de entrada desaparecen. Por ejemplo, cuando me acerco al 90% obtengo:

Naturalmente, su kilometraje puede variar.

En caso de que se esté preguntando sobre esas etiquetas <span> , las agregué siguiendo la recomendación en ¿Cómo hago que un elemento de entrada ocupe todo el espacio horizontal restante? .

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

Gracias.

Answer 1

En caso de que sea necesario desbordar: oculto es necesario, mencione desbordamiento: oculto solo para el navegador al que se enfrenta el problema de ancho. En otro navegador, metion display: flex para que el ancho se tome automáticamente y también para que al acercar / alejar los bordes no desaparezcan.

Por ejemplo: el ancho no era correcto en mi caso solo para IE, así que mencioné:

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

Y el problema de zoom in / out estaba ocurriendo en Firefox y Chrome, así que mencioné

.spanStyles {
 display : flex;
}

Esto resolvió mi problema en todos los navegadores.

Answer 2

Esto se debe a que está configurando una altura fija, y cuando el zoom de la entrada crece más que esa altura, el borde desaparece. Use la altura de la línea y el relleno para obtener la altura deseada en su lugar - vea el Fiddle actualizado

Actualización: ignore lo que dije, es porque está configurando overflow:hidden en su tramo, eliminando eso debería hacer el truco. Sin embargo, podría resultar en una necesidad de cambiar el ancho de entrada.

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

Answer 3

Estoy bastante seguro de que Luís Pureza ha resuelto su problema, pero encontré una manera muy fácil de resolverlo cambiando solo esto:

Si tienes un borde de mesa como este:

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

Cambia esto a este:

INPUT,TEXTAREA {
border-top: thin solid #aaa
}

Encontré esta solución en este enlace: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

Espero que ayude

Answer 4

Sé que estoy atrasado en el juego, pero manipularlo un poco y establecer el ancho del borde en 1.5px parece hacer el truco cada vez.

Answer 5

Tuve un problema similar con Chrome en 2018: faltaba el borde superior en las entradas y áreas de texto. La solución fue especificar el borde superior en css simplemente como

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

No puedo explicar por qué era necesario, y solo estaba perdiendo las fronteras en ciertos lugares, pero al menos eso fue una solución rápida.

Answer 6

Usted está obligando a Chrome a realizar cálculos de subpíxeles, 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 de subpíxel.