susy and webkit problems [solved]

[elijah]

I think susy is very nifty, for all the reasons stated in compass-devs
and compass. But I have not been able to get it to behave under webkit-
based browsers. The problem is that the percentage-based columns and
margins often render 1px larger than they do under Gecko, which can
create a column that is 4px off from where it should be with a four
column layout.

I thought that the problem was me, but even the html and sass in the
susy tutorial render horribly in chrome. I thought it was maybe just
the version of chrome I was using, but I get the same problems with
konqueror, which I think webkit forked from a eight years ago -- so it
must be a problem deep in the khtml/webkit renderers.

Searching for "+webkit +susy" does not return anything useful, so I
set about trying to get susy working under webkit/khtml. It seems hard
for me to believe that everyone else has put up with such horrible
rendering under chrome and safari, so it is very likely that I am
indeed doing something wrong.

If, in fact, susy has these problems with webkit, I submit for your
enjoyment the following patch:

http://github.com/elijh/compass-susy-plugin/commit/6b7e43fae9d02519fc658963fd4c4ec6db15b797

The patch is minimally invasive, but does involve browser specific
css.

You can read how this patch works and see the screenshots of before
and after here:

https://we.riseup.net/cgdev/susy-and-webkit

-elijah

[elijah]

After I wrote this fix/hack, I discovered that the problem with webkit
is known[1] and different liquid/elastic css frameworks have different
hacks[2] to get around it.

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.

[1] http://css-tricks.com/percentage-bugs-in-webkit/
[2] http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/

-elijah

[Eric Meyer]

Elijah,

Sorry for the slow response. I've been swamped with work and moving,
so maintaining open source software hasn't made the top of my list in
a while.

I do recognize the issue, and have known about it for some time. This
is not a flaw in Susy, but a common issue of sub-pixel rounding -
solved differently by all browsers and constantly changing. This is,
in fact, one of the very first challenges that I had to solve in
developing Susy - but for IE6 (which always rounds up, breaking the
grid entirely).

Susy is built entirely on a philosophy of flexible (responsive) web
design. It is a direct alternative to the more pixel-perfect,
inflexible grid systems that came before compass (e.g. blueprint,
960). If you need that type of control, you should use those grid
systems. I believe Susy is a better approach to the web, working with
the strengths of the medium (such as flexibility and user control),
rather than fighting them. And, with that philosophy in mind, I have
had absolutely no trouble building complex and detailed designs that
are flexible enough to withstand the browser differences. Susy is not
meant to solve all problems, it is meant to solve the problem of
building extremely flexible and responsive sites that should remain
future-proof. Browser-sniffing to nudge pixels here and there is
decidedly not that.

There is no pixel-perfect solution for this that is both reliable and
maintainable across browsers, and I don't plan to incorporate browser-
sniffing hacks into the core of Susy. Feel free to make your own edits
and use/distribute them as you will.

There are also plenty of CSS solutions that can be used with Susy to
eliminate extra spaces. I highly recommend the habit of leaving
columns flexible whenever possible. Using the overflow property to
trigger layout context (as used in OOCSS and others) can be quite
useful for this.

Happy coding.
-e

> [2]http://elasticss.com/determination-of-algorithms-used-for-percentage-...
>
> -elijah