Flexbox Not Working On Safari

[Anonymous]

for some reason flexbox is not working on safari including mobile. Theres not much else to say.

#sidebar-tabs-container {
    width:100%;
    overflow:hidden;
    position:relative;top:0px;
    text-align:center;
    display:-webkit-flex;
    display:-webkit-box;
    display:-moz-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    flex-direction:row;
}

.sidebar-tab {
    padding:10px 0px 10px 0px;
    font-family:open_sanslight;
    font-weight:normal;
    letter-spacing:1px;
    font-size:.713em;
    text-transform:uppercase;
    /* transition effect */
    -webkit-transition:.20s;
    -moz-transition:.20s;
    -o-transition:.20s;
    transition:.20s;
    /* flexbox */ 
    -webkit-flex:1;
    -webkit-box-flex:1;
    -moz-flex:1;
    -moz-box-flex:1;
    -ms-flex:1;
    flex:1;
}

[Senff]

According to CanIUse, it should: http://caniuse.com/#search=flex

[Anonymous]

But it isn’t. Does safari use something else besides webkit?

[Paulie_D]

Nope…but that doesn’t mean that something else isn’t wrong.

Codepen or a live link please.

That said, you really shouldn’t be using flexbox as your mainstay…the support just isn’t there yet.

[Anonymous]

What do you suggest I use besides flexbox to get the same functionalities?

[Paulie_D]

Not suggesting that you don’t use it…just have a fallback for browsers that don’t support it.

http://caniuse.com/#feat=flexbox

Regardless, without seeing a link we can’t help much more

[Anonymous]

I created this pen but forgot to link it. http://codepen.io/Jarolin/pen/oeyEd

[Paulie_D]

Codepen seems a little sparse…I can only see a menu.

Is there supposed to be more?

[Anonymous]

If you see 3 menu bars with a blue background color and white text thats all there is. The problem is that on safari the navbars aren’t fluid and don’t stretch to match the container width.

[paulob]

HI,

The problem is caused by the silly html5 rule that allows you to wrap anchors around block elements. It breaks often unless you set the anchor to display:block.

#sidebar-tabs-container a{display:block}

[Anonymous]

Thanks man that worked. Their not equally wide but at least it worked.

[Archibald]

Adding display block to the anchor fixed it for me too. Thanks Paulob.

[arvindarvee]

thanks for this ,finally my issue fixed fixed in safari

[fshareef]

The following code is not working in safari (5.1.7)

<

div class="flex-container">

<

div class="slider_wizzard">

.grid_slide_area.slider_2 .smart-form .flex-container{
display: flex;
display: -webkit-flex;
display: -moz-flex;
overflow: auto;
min-height: 100%;
}
.slider_wizzard{
width: 27.1%;
padding: 0 7px 0 5px;
background: #e8e8e8;
float: left;
}
.grid_slide{
width: 72%;
background: #fff;
float: left;
}

[paulob]

If you mean Safari 5.1.7 on Windows then that was discontinued and support dropped about 8 years ago long before flexbox was even thought of so is not surprising it doesn’t work properly.

If the float:left was an attempt at a fallback for older browsers then if you remove the flex properties you will see that the columns do not go side by side at widths less than about 1300px because you have made them too wide 27.1% + 72% + 12px = ????

Remove the px side padding and use a suitable percent or use the box-sizing:border-box model to avoid the boxes getting bigger.

If you are indeed using Safari on Windows then I suggest that you uninstall it immediately as any unsupported browser is a high security risk these days. testing safari on windows is futile anyway because it does not represent normal safari on the mac any more and would be a waste of time to test against. There’s only a couple of misguided developers using it anyway :).

[Author]

Posts