Percentage Bugs in WebKit

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take the pain out of building site search with the Algolia hosted API. Start free now!

Using percentage values for certain things can have slightly unexpected results in WebKit based browsers. For instance, if you have a series of columns set in percentage widths with percentage padding, WebKit can calculate their sizing rather strangely.

Update: WebKit now has subpixel rendering, which should clear up this issue.
The red lines indicate the column as rendered with WebKit. The background shades of gray are accurate placement of those columns in percentage widths.

It’s percentages in general that seem to be the issue. I haven’t been able to dig up a ton of information on it, although I do seem to remember reading something about it quite a while ago. I think it’s related to how subpixel values are calculated. For example, if a container is 657px wide currently, and has four columns at 25% each, they would be 164.25px each wide, and WebKit doesn’t handle that well (rounding issues?) Other browsers handle the “subpixel” value OK.

Firefox, IE, and Opera are fine.

Thanks to Nicolas Gallagher for pointing this out to me. If I’m way behind the times on this, feel free to yell at me, but throw me some links and information so I can update this post with the most accurate information I can. This link seems to indicate the issue has been around a while.

Remember this is only really an issue if you are doing something like shown in these examples with solid color columns. If you didn’t have any visual separators, it might not be a big deal, just a slight cross browser difference very few people would ever notice.