Tuesday, January 22nd, 2008

Sub pixel fun with browsers

Category: Browsers, CSS

John Resig has been tinkering with the sub pixel problems in CSS and how browsers deal with bit of pixels:

Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little, to no, standardization.

Take the following page for example. You have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px. Here’s the question: How wide are each of the divs?

The problem lies in the fact that each div should be, approximately, 12.5px wide and since technology isn’t at a level where we can start rendering at the sub-pixel level we tend to have to round off the number. The problem then becomes: Which way do you round the number? Up, down, or a mixture of the two? I think the results will surprise you, as they did me.


When I went to the example in FF3b2 on Mac, it actually looked more like IE.

Posted by Dion Almaer at 2:06 am

4 rating from 30 votes


Comments feed TrackBack URI

Nothing surprises me anymore… But good to know. “bugs” like these can be hard to find.

Comment by mos — January 22, 2008

So which is the most correct way?

Another thing on the list that needs to be standardised…

Comment by danielskinner — January 22, 2008

Obviously the elements should never wrap if the sum of their widths is 100%. So IE is incorrect. As for which of the behavior of opera/safari or firefox is correct, I think that’s a matter of opinion.

Any preferences? I’d prefer the model which has the best worst-case behavior, and I think that’s the firefox model, because the opera/safari model could leave a large gap if you have lots of elements.

Comment by Joeri — January 22, 2008

I like FF’s way in that the children, as expected, take the full width of the container. However it’s really bad that the offsetWidths and offsetLefts don’t add up to the width of the container. I think I wouldn’t mind having some DIVs with an offsetWidth of 12 and others with one of 13.

Comment by Mathieu \'p01\' Henri — January 22, 2008

It’d just be stupid for the browsers to actually set subpixel values and let the relevant graphics APIs take care of the rendering.

Comment by Trevor — January 22, 2008

Leave a comment

You must be logged in to post a comment.