Menu
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 normally not a big issue, but when I use em to precisely align letter spacing or use text-shadows for consistent effect in different client resolutions this causes me headache. Take a look in the following test case.
You will see that in FF even the smallest letters still have a shadow, while Chrome rounds down the em value to zero and the first two paragraphs have no shadow.
EDIT This is not about the units. If you replace 0.03em with 0.9, 0.8, 0.7 .. px FF will display smaller and smaller shadow, while when Chrome goes below 1px it suddenly displays nothing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>
<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>
</body>
</html>
694
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.
50
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
