Skip to content
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 · 11 comments
Closed

Grid System inconsistency in Mac Safari #9282

ahmdsmir opened this issue Aug 9, 2013 · 11 comments
Labels

Comments

@ahmdsmir
Copy link

@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
Copy link
Member

@cvrebert cvrebert commented Aug 9, 2013

Confirmed with latest Safari.

@mdo
Copy link
Member

@mdo 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
Copy link
Contributor

@jonschlinkert 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
Copy link
Contributor

@jonschlinkert 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
Copy link

@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
Copy link
Member

@cvrebert 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
Copy link
Collaborator

@hnrch02 hnrch02 commented Sep 22, 2014

This was apparently fixed in Safari 7.1: Screenshot

@Barelmusenga
Copy link

@Barelmusenga 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

@ez2torta
Copy link

@ez2torta ez2torta commented Sep 25, 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

Thank you very much! this should be pinned

@mansouryaacoubi
Copy link

@mansouryaacoubi mansouryaacoubi commented Oct 9, 2018

@Barelmusenga thanks a lot man... you're a star :D
https://stackoverflow.com/a/52719475/2613838

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

@gogears
Copy link

@gogears gogears commented Feb 5, 2020

I need a clarification on this, that is why the layouts are collapsing in the safari browser alone. Is there any specific reason on using bootstrap V4*

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.