Percentages are really bugging you WebKit, aren’t they?
For those of you with a good set of eyes, you’ll probably have spotted some strange alignment issues with the grid on Responsify. I’ll forgive you for thinking I’ve got my calculations wrong, it seems WebKit browsers (and Opera) have some weird issue with correctly calculating percentages, yet Firefox manages this fine.
I’m not going to bore you with technicalities in this post as there is a great article on CSS Tricks which covers the issue, but here is a sentence from the article which describes the problem:
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.
I’m not sure how many people are aware of this bug, I mean I knew nothing about it either until I came across it working on Responsify. Initially I thought I was being stupid and had made a mistake with my calculations but after triple checking I figured something else was the cause. After a few Google searches I found out that WebKit and percentages don’t get on so well.
Let me show you exactly how it looks when WebKit gets it wrong.
Obviously this isn’t ideal, we’re not working with pixels as units but we still want our designs to be pixel perfect. I carried out a little research into the problem to see if anyone had come up with a decent solution, but unfortunately there isn’t a whole lot out there about the issue, let alone fixes. Maybe this is because the issue isn’t widely known or because it doesn’t cause a problem in most scenarios, I really don’t know.
I did however come across a clever approach which does solve the problem, albeit a bit more complex than the standard grids we are used to.
Negative grid was created by Chris Planeta for his own personal use, but he put it online for everyone to use. Here’s what he has to say about it:
Negative grid uses a different approach to positioning columns than ordinary grids. Normally, the position of a column is relative to the column on its left (distance set with a left margin). In NegativeGrid the position of all the elements are calculated from the left border of the container. It is all possible due to a simple margin-right: -100% added to columns.
This is a great solution that works well and I did consider building this technique into Responsify, but I wanted to keep things as simple as possible so that the grid is easy to use and more importantly so that it’s easy to understand what’s going on. You should definitely check it out though, as it’s a very interesting technique.
This bug has made me think long and hard about how I will build Responsive sites in the future. I’m still going to use percentages as the bug is barely noticeable in most situations, but I plan to start experimenting with ems for layout and find some way to incorporate them into Responsify, so expect an update in the near future.
As always, I’d love to hear your thoughts!
UPDATE: Good news, subpixel rendering is coming to WebKit, so when this eventually reaches the browsers, we should have no more issues with percentage based layouts. Success!