the problem¶

Susy uses percentage widths to control all the columns in the layout. This is pretty cool, because it makes the layout very elastic. The problem is that webkit and khtml based browsers (chrome, safari, konqueror), render percentage widths slightly differently than Gecko browsers.

Here is a sample susy layout in firefox (with reference grid shown in the background):

Looks nice!

But here is the exact same css+html in chrome:

Ouch. This is more than a minor problem, because it can easily make one column 4 pixels off from what it should be.

But there is hope. If you nudge the width of the gutters and columns by a very small amount, then it renders pixel perfect in chrome/webkit:

The problem is, the minimum amount of nudge needed for this to work is more than the maximum amount of nudge that firefox will tolerate without starting to mess up the alignment of its columns.

(these screenshots were made using these haml and sass files.)

the solution¶

I wrote a patch to susy that will produce slightly different percentages for webkit browsers. For this to work, you need to detect webkit browsers and configure susy with a browser specific css selector of your choice.

(1) detect a webkit browser:

Here we add class webkit to body when javascript detects a webkit browser:

document.observe("dom:loaded", function() {
  if (/khtml|webkit/i.test(navigator.userAgent)) {$$('body').first().addClassName('webkit');}
  });
}

maybe this should be called before dom:loaded?

(2) in sass, define the webkit selector to match what javascript sets

$webkit-selector: "body.webkit";
@import "susy/susy";

(3) apply patch to compass-susy-plugin

apply this patch to susy or clone this repo to allow susy to nudge the widths for browsers that match $webkit-selector.

what does it do?¶

here is an example of the output:

h1 {
  margin-right: 1.639%;
  margin-left: 1.639%;
}
body.webkit h1 {
  margin-right: 1.68%;
  margin-left: 1.68%;
}

discussion¶

After I wrote this fix/hack, I discovered that the problem with webkit is known and different liquid/elastic css frameworks have different hacks to get around it. Susy does not yet have a solution for this problem.

I like the approach that I took with this patch: it is precomputed, flexible, and fairly straightforward. The one problem with the patch is that it will mess up if they ever change the way webkit renders columns to be more like gecko. When/if that happens, you can just disable the $webkit-selector.