Tuesday, January 22nd, 2008
Sub pixel fun with browsers
<>p>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.
Related Content:
Nothing surprises me anymore… But good to know. “bugs” like these can be hard to find.
So which is the most correct way?
Another thing on the list that needs to be standardised…
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.
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.
It’d just be stupid for the browsers to actually set subpixel values and let the relevant graphics APIs take care of the rendering.