necolas / griddle

A CSS grid constructor

Home Page:http://necolas.github.com/griddle

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Safari 7

chriscoyier opened this issue · comments

I think there was some kind of change in Safari 7 that changed rounding (again). Ultimately it breaks griddle.

screen shot 2014-02-09 at 5 52 24 pm

Changing the letter-spacing from -0.31em to -0.32em fixes it, but then it's a bit ragged-right. Might wanna try the font-size: 0; thing or some other approach.

Hi Chris,
Thank you to point out this issue. It seems this hack has many inconveniences (especially when there are a new broswer release) and is not a perennial solution in any way (it's my opinion since the beginning).
IMHO, that is why Nicolas chose to use another solution in his suitcss/grid project.
But each 'hack' to avoid this HTML problem have theirs drawbacks (e.g.: #24) while there are numerous other solutions without CSS (e.g.: Remove the spaces)
For now, I use this CSS property only with a compressed code (otherwise I don't).

Yeah I don't use Sass anymore. If someone wants to put together a PR to implement the font-size hack, like in suitcss/grid, then I'll accept it.

@necolas I am intrigued, why did you decide to move away from sass and just use plain css? Did you write about it?

Haven't written about it. Might do at some point.

Another possible solution may be to use the ch unit: http://codepen.io/joeyhoer/details/zxPaXZ/. Better browser support, but you still have to redefine the font-family, which may be undesirable.