Grid System inconsistency in Mac Safari #9282

ahmdsmir opened this Issue Aug 9, 2013 · 7 comments


None yet

6 participants

ahmdsmir commented Aug 9, 2013

The Grid system is, can I say inconsistent? in Mac Safari. I tested on rMBP and MBA

This is the same case with Bootstrap 2.x as well. I am not sure if there's a Safar-Specific fix for it, as it would appear to be a Safari Problem.

Mac Safari Screenshot:
screen shot 2013-08-09 at 6 48 04 am
Mac Opera/Chrome Screenshot:
screen shot 2013-08-09 at 6 48 15 am

cvrebert commented Aug 9, 2013

Confirmed with latest Safari.

mdo commented Aug 12, 2013

This is a Safari specific rounding issue and one we can't even try to solve until Less 1.4 is baked into Recess (the round function isn't available in 1.3.3 I believe). Even with the rounding, I'm not sure it'd work out that well.

/cc @jonschlinkert though to confirm that last part though.

@mdo mdo closed this Aug 12, 2013
@mdo mdo added a commit that referenced this issue Aug 12, 2013
@mdo mdo mention #9282 in docs browser section 3f2408f

the round function was added I think in 1.0 or 1.1-ish, and I'm pretty sure support for fractions was added to the round function before 1.4.0, but I'll double check. If I understand correctly though, with the current grid system I'm not sure how the safari bug could be fixed unless you were compiling client-side or using some kind of js shim. Perhaps respond.js could add a shim for this? It seems appropriate for that lib.


here is the commit for adding support for fractions to rounding: less/less.js@86520e5

also, once 1.5.0 lands I'll be spending some time on recess.

carasmo commented Sep 25, 2013

At every media breakpoint, the width for col-*-1 is 8.333333333333332% this is what I did to address rounding only on safari 5 and up. It appears to work great. Let me know. This uses the less variables in the media queries, which are min-width 768px;

  @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: @screen-tablet) { 

  ::i-block-chrome, .row.safari-fix  {
 ::i-block-chrome, .row.safari-fix [class*="col-"] {

} /* end safari rounding bug hack */

screen shot 2013-09-25 at 7 50 34 pm

*** I added a class .safari-fix on the row.


@mdo So, now that we're using an up-to-date version of Less, do we want to attempt a round()-based solution?

hnrch02 commented Sep 22, 2014

This was apparently fixed in Safari 7.1: Screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment