Skip to main content

Forums

This topic contains 14 replies, has 7 voices, and was last updated by  paulob 6 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #158972

    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;
    }
    
    #158977

    Senff
    Participant

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

    #158995

    Anonymous

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

    #159021

    Paulie_D
    Moderator

    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.

    #159027

    Anonymous

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

    #159029

    Paulie_D
    Moderator

    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

    #159037

    Anonymous

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

    #159038

    Paulie_D
    Moderator

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

    Is there supposed to be more?

    #159040

    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.

    #159055

    paulob
    Participant

    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}
    
    #159064

    Anonymous

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

    #262292

    Archibald
    Participant

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

    #270163

    arvindarvee
    Participant

    thanks for this ,finally my issue fixed fixed in safari

    #283069

    fshareef
    Participant

    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;
    }

    #283075

    paulob
    Participant

    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 :).

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star