Forums

Give help. Get help.

  • Anonymous
    # December 22, 2013 at 1:05 am

    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;
    }
    
    # December 22, 2013 at 8:03 am

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

    Anonymous
    # December 22, 2013 at 7:31 pm

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

    # December 23, 2013 at 8:09 am

    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
    # December 23, 2013 at 11:08 am

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

    # December 23, 2013 at 12:17 pm

    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
    # December 23, 2013 at 3:20 pm

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

    # December 23, 2013 at 3:41 pm

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

    Is there supposed to be more?

    Anonymous
    # December 23, 2013 at 4:02 pm

    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.

    # December 24, 2013 at 9:02 am

    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
    # December 24, 2013 at 12:17 pm

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

    # November 7, 2017 at 3:44 am

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

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag