Grid System inconsistency in Mac Safari

[ahmdsmir]

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:

Mac Opera/Chrome Screenshot:

[cvrebert]

Confirmed with latest Safari.

[mdo]

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.

[jonschlinkert]

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]

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]

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 */

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

[cvrebert]

@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 was apparently fixed in Safari 7.1:

[Barelmusenga]

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]

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]

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

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*

[emilcheva]

For anyone else that can come across this one --> the issue happens with Bootstrap 3 grid on Safari 13 but not on Safari 14.
The suggested solution will distort the Safari 14 !
.row:before, .row:after{
display:inline-block;
}
Here's what worked for me for both Safari versions: Please mind that you might need @supports for this so that Chrome, FF and Edge remain unchanged by this:
.row:before, .row:after{
display:flex;
flex-wrap: wrap;
}