¿Por qué los métodos position() y offset() de jQuery devuelven un número fraccionario en Chrome?

Question

Tengo una etiqueta div simple, posicionada absolutamente dentro de un documento HTML. Cuando estoy en Chrome, establezco su regla CSS "correcta" en un valor fijo en píxeles, y su regla "izquierda" en "auto", y luego inmediatamente determino su posición izquierda usando el método position() de jquery, el valor devuelto es algo de este tipo: 122.6363525390625. Lo mismo ocurre con el método offset().

Firefox, por otro lado, no tiene este problema.

¿Puede decirme por qué sucede esto y si hay alguna forma de prevenirlo? ¡Gracias de antemano!

Answer 1

Porque cuando usa anchuras porcentuales, así es como funcionan las matemáticas. Imagine que tiene este diseño: anchura

<div style="width: 111px"> 
    <div style="width: 50%"></div> 
</div> 

del elemento interior calcula a 55,5 píxeles, no es un número natural. Dependiendo de los atributos exactos de CSS esto podría funcionar fácilmente a bastantes lugares decimales más.

Chrome uses subpixel rendering, por eso es que ve este comportamiento.

Finalmente: no estoy seguro de por qué esto podría causar un problema, pero por supuesto si desea redondear a un número natural puede usar Math.round(x).

Answer 2

En Chrome, los valores se truncan, por lo que 120, 120.5 y 120.6 muestran todos el mismo ancho, por lo que no tiene que preocuparse por usar valores decimales. No hay nada como .5 pixel. Pixel son unidades enteras. Si tiene este problema de funciones que devuelven valor decimal, ¿por qué no utilizar parseInt? No debe dejar esto al navegador para que se ocupe de ello o su página puede romperse.