Question

I’ve run into a problem with Google Chrome (version: 15.0.874.121 m): when a block’s width is less than 0.99px (precisely), it’s displayed incorrectly — with the width of the inner text.

Sample code:

<style>
.frame { float: left; border: solid; }
.frame div { width: 0.98px; overflow: hidden; }
</style>
<div class="frame"><div>Long text</div></div>

And here’s a live demo: http://jsfiddle.net/bDTgX/1/

The same code works well in Firefox, Opera, and Internet Explorer.

What could be the reason (a bug in Chrome?) — and how could it be resolved?

Answer 1

I wouldn’t say this is a bug really, but it is just how webkit is rounding sub-pixel metrics. Note that it’s considering .99 to round up, anything else it’s rounding down…

http://jsfiddle.net/bDTgX/9/

If it rounds down to zero, it’s just ignored all together as it assumes you’ve made a mistake. So, therefore, anything less than .99px would be ignored and default to with: auto; If you don’t like the way this is taking, use max-width: and it will conform to it’s zero px. But the rounding is set, you will just have to deal with that. Sub-pixel rendering just isn’t supported on webkit like it is on gecko (firefox).