Grid System inconsistency in Mac Safari #9282

Closed
ahmdsmir opened this Issue Aug 9, 2013 · 7 comments

Projects

None yet

6 participants

@ahmdsmir
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
Member
cvrebert commented Aug 9, 2013

Confirmed with latest Safari.

@mdo
Member
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
@jonschlinkert
Contributor

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.

@jonschlinkert
Contributor

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
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  {
    display:table!important;
  }
 ::i-block-chrome, .row.safari-fix [class*="col-"] {
    display:table-cell!important;
    float:none!important;
   width:auto!important;
   padding-left:2%!important;
   padding-right:2%!important;
  }

} /* end safari rounding bug hack */

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

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

@cvrebert
Member

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

@hnrch02
Member
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