Web-Kit and sub-pixel values, workaround?

Question

I noticed that Web-kit browsers like Chrome and Safari (Windows) tend to round em values to nearest pixel, while Firefox, IE, ? Opera ? can use sub-pixel values. This is nor

Answer 1

The problem is that chrome won't position text and text shadows at sub-pixel increments, so it rounds to the nearest pixel.

You can see the same effect with letter-spacing where firefox will allow non-integer values in pixels, while chrome will round the closest pixel.

Answer 2

I wouldn't suggest em. I'd use px (pixels). Here is an EM to PX converter: http://convert-to.com/446/pixels-px-to-em-conversion.html

PX is the same across all browsers (as far as I know)

Answer 3

First thing I would suggest is that you use ex units for y coordinates and height values as a fonts may have a separate x-heights. This may help curve rounding errors in your favor, but probably not. The worst case is that it is at least accurate to the font itself.

Second, unfortunately I cannot find any reference in the spec that says what a browser should in this case which is why we are seeing the differences? If I'm wrong, you could always file a bug with the webkit team?

As far as a solution I can only suggest you determine the best path in this case. Think of it as similar to IE not supporting text-shadow. If the rounding fails, it won't appear. Then make decisions on your design based on this stance.

What I personally do is use pixels for things I know are likely to have rounding errors, such as shadows and borders.