ios subpixel issues

[lkrids]

For 1/3 columns there is a gap on the far right on iOS. I think this has to do with subpixel rounding.

I got this code from @stubbornella (https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css#L14):

.last{ float: none; overflow: hidden; width: auto; }

Seems to fix the issue.

[csswizardry]

Hmm, unfortunately this is a browser problem. There is no spec for how bowsers should handle rounding so I’d be reluctant to spoil the inuit.css grid system (which I’m really ‘proud’ of) to fix something which is the browser’s fault.

Hopefully browsers might, one day, all agree and get it right :)

[bewildergeist]

FWIW, the Susy grid system solves this by floating the last column to the right, which moves the rounding error to the gutter before the last column, where it is less noticeable. Might be a solution in some cases.

[kevva]

It requires too much unnecessary code since :last-child won't work because in many cases the last column isn't the last column if you are using a different number of columns in different viewports. The same goes for the .last class.

[stubbornella]

I get your sentiment @csswizardry, but I think a usable grids system has to line up on the right side too (it can be several pixels off if there are a lot of columns). I wonder if there is a way to do it that would be less objectionable for you?

[TheDutchCoder]

There's no 'last' column in a grid system like this, because every 'column' could be in a different position depending on the media query that is active.

E.g. if you have a 'column' that is supposed to be the 'last' on desk-view, but is the 'first' on lap-view, then you'll have a problem with that 'column' floating to the right. Especially if it's not a full-width column.