Comportamiento de ancho de borde extraño en Chrome: ancho de borde de punto flotante?

Ciertos diseños fluidos, especialmente aquellos que implican iFrames de% de ancho, parecen causar algunos extraños errores de redondeo en Chrome (tengo la versión 21).Comportamiento de ancho de borde extraño en Chrome: ancho de borde de punto flotante?

This Fiddle demuestra el problema. Establezca el borde en un valor de píxel entero, y los valores que obtenga cuando los solicite son números de punto flotante ligeramente más pequeños que el valor esperado.

Probar el exact same code in CodePen no produce los mismos resultados, presumiblemente porque el iFrame y otros estilos a su alrededor no están configurados de la misma manera.

(También he visto este comportamiento para el ancho básico y atributos de altura, aunque yo era incapaz de replicar esa parte del problema en jsFiddle.)

Esto no parece ser un problema en Firefox o en IE8.

¿Alguna idea sobre qué, específicamente, está causando este extraño comportamiento, y cómo puedo solucionarlo para obtener los valores reales?

La trama espesa. En un intento de analizar el problema, descubrí que los valores superiores a 10px no parecen estar sujetos al problema.

También, basado en el comentario de @ GionaF, que parece funcionar correctamente en Chrome 22.

Fuente

2012-10-12 Chris Jaynes

En realidad, obtengo 3px (cromo 22) – Giona

Beh. Gracias por mirarlo @GionaF. Desafortunadamente, no tengo la opción de actualizar en este momento ... –

Recientemente tuve un problema con Chrome: tratando de colocar el bloque de ancho impar (49px) en el 50% de ancho, estaba obteniendo posiciones un poco diferentes/- 1 píxel en anchos de pantalla pares e impares. Resolví esto añadiendo 1px relleno para asegurarme de que el bloque sea parejo. Espero que este consejo te ayude. –

Para reproducir su problema, tengo que cambiar el nivel de zoom de Chrome. Cambiar el nivel de zoom de nuevo al 100% lo soluciona. Parece ser un error, el ancho del borde calculado siempre es más pequeño que el ancho del borde definido, acercándose o alejándose.

Su borde de 10px da un valor de 10 cuando el nivel de zoom es 110%, pero en 125% tiene el mismo problema que su borde de 3px.

editar: firefox tiene el mismo comportamiento!

Fuente

2013-05-24 16:29:44 Willem

Esta es finalmente la forma más confiable de recrear el problema. No creo que tuviera un nivel de zoom establecido cuando inicialmente tuve el problema, pero es bueno saber que se puede recrear mediante el zoom. –

En mi caso, mi zoom se activó en un 90% (sucede ocasionalmente cuando uso el botón de desplazamiento y las teclas Ctrl tan a menudo como yo), y mis bordes de 1px se calculan como 1.11px o aproximadamente 10% más anchos de lo que deberían estado. – redOctober13

No puedo reproducir este comportamiento en cromo en la actualidad, pero este comportamiento más probable es que tiene que ver con Subpixel Rendering. Esencialmente, Webkit hará cálculos usando matemática entera para evitar la imprecisión de coma flotante.

Parece que actualmente, border no utiliza la representación de subpíxeles, lo que puede explicar por qué el problema no está visible en las nuevas versiones de Chrome.

Fuente

2013-05-19 14:35:13

He vuelto a votar esta respuesta, porque creo que es probablemente correcto que tenga que ver con la representación de subpíxeles, pero me gustó que la respuesta de Willem me permitió al menos recrear el comportamiento. Supongo que había un error de renderizado sub-pixel en la versión de Chrome que estaba usando, tal vez incluso relacionado con el zoom, pero probablemente esté demasiado atrás para estar seguro. ¡Gracias por tomarse el tiempo para responder! –

¿Ayuda el ajuste del tamaño de la caja al cuadro de borde para todos los elementos? Esto cambiará la forma en que se calcula el modelo de caja donde el borde y el relleno no afectarán el ancho.

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; }

Fuente

2013-05-24 00:15:35 Alex

También tuve problemas con el borde en input sy otros elementos. Después de una hora de tiempo dedicado, encontré una razón inesperada para causar este problema. Bootstrap CSS utiliza normalize css y el siguiente código estaba causando dicha emisión:

hr { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
}

Para resolver este problema, puedo reemplazar el css en mi style.css:

hr { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

La regla hr es realmente no relacionado con input s pero funciona. Este es un comportamiento realmente inesperado, pruébalo y funcionará.

Fuente

2017-11-03 06:43:28

Comportamiento de ancho de borde extraño en Chrome: ancho de borde de punto flotante?

Respuesta

Cuestiones relacionadas