New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid System inconsistency in Mac Safari #9282

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

Comments

Projects
None yet
7 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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 9, 2013

Member

Confirmed with latest Safari.

Member

cvrebert commented Aug 9, 2013

Confirmed with latest Safari.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 12, 2013

Member

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.

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 added a commit that referenced this issue Aug 12, 2013

@jonschlinkert

This comment has been minimized.

Show comment
Hide comment
@jonschlinkert

jonschlinkert Aug 13, 2013

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.

Contributor

jonschlinkert commented Aug 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jonschlinkert

jonschlinkert Aug 13, 2013

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.

Contributor

jonschlinkert commented Aug 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@carasmo

carasmo 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.

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 19, 2014

Member

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

Member

cvrebert commented Jan 19, 2014

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

@hnrch02

This comment has been minimized.

Show comment
Hide comment
@hnrch02

hnrch02 Sep 22, 2014

Member

This was apparently fixed in Safari 7.1: Screenshot

Member

hnrch02 commented Sep 22, 2014

This was apparently fixed in Safari 7.1: Screenshot

@Barelmusenga

This comment has been minimized.

Show comment
Hide comment
@Barelmusenga

Barelmusenga Aug 16, 2018

You can resolve this problem of 12 grid columns in Safari browser by doing this:
.row:before, .row:after{
display:inline-block;
}
and everything will look good

Barelmusenga commented Aug 16, 2018

You can resolve this problem of 12 grid columns in Safari browser by doing this:
.row:before, .row:after{
display:inline-block;
}
and everything will look good

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