No later than a few days ago, at Octave & Octave, I had to make a grid generator in Sass which is fully responsive. Rather than using a fixed grid as I usually do, I decided to create a fluid grid using percentages (calculated with the famous target / context * 100 = result).
Indeed, after finishing the book Response Web Design from A Book Apart where the author proposes to use this type of grid, I must say I was convinced by this flexibility. And I think that I am not alone. Just look at the number of frameworks using this kind of grid (Foundation, Tiny Fluid Grid, Fluid960gs…)
After some hours of development to obtain optimal results based on the guidelines of my agency, I was surprised to notice a very annoying display bug on my Safari.
Well… Did I make a mistake in my calculations? After checking, no. Moreover, the rendering in Firefox is perfect! So, I started to do some research on google. And I came across the article by Chris Coyier dating from August 2010 and explaining the origin of this bug. It would seem that this bug is a problem of rounding. In fact, an issue for this problem is open in the WebKit bug tracker since January 2006!
Amazement, this problem is known and uncorrected for 6 years. I don’t blame WebKit teams, but I’m particularly surprised by the fact there are a lot of CSS frameworks based on this kind of grid whereas the result is visually completely distorted.
Example in Foundation, the brilliant CSS framework by Zurb.
I seriously think that teams should work again on this issue in these times of “responsive design”. There must be an impressive list of websites that uses this kind of grid. And many of them are visually distorted compared to the appearance that they really should have. OK, I am a bit fussy, and we can certainly override this problem. But still!
Anyway, I needed to find a solution for my generator! After some research, I learned that OOCSS -a project from Nicole Sullivan- used this type of grid and a fix for WebKit. In fact, OOCSS uses a class “last” that it’s not floated. The trick forces the last column to expand out like a table cell and consumes the remaining space, eliminating the gap.
I took this snippet of code and I modified it slightly. It seems unnecessary to add a class on the last column because WebKit understands the pseudo-class `:last-of-type. I also writing a code readable only by WebKit browsers. (Safari 3 + and Chrome1 +)
@media screen and (-webkit-min-device-pixel-ratio:0){
.row>.column:last-of-type{
display: table-cell;
float: none;
width: auto;
}
.row>.column:last-of-type::after {
content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
visibility: hidden;
clear: both;
height: 0 !important;
display: block;
line-height: 0;
}
}I’ll let you judge by yourself in your favorite WebKit browser! Here the version without the trick, andhere a version which contains this fix.
Anyway, hopefully this bug will be fixed soon!
Edit: (January, 7th 2012) I had these interesting feedbacks on Twitter. So I decide to them share with you.
https://twitter.com/magsout/status/155384096602861568
And Ethan gave me the address of an old article explaining plainly the situation.