0

I'm creating a simple site using HTML5 and flexbox model which works in most browsers but is broken on IOS (using iphone 7 plus) and some older android phones.

I've put a codepen together to demo the problem which does replicate when using codepens "crossbrowser testing". images don't display but the place holders are correct. I will also include the HTML and CSS [LESS] code in this post.

http://codepen.io/stuartmc77/pen/PpjKmY

I've added all the cross browser prefixes I could think of and found from various other posts but non seem to fix it.

I'm very new to the flexbox model so any and all help is apprectiated.

[HTML]

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>MyPage</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <div>

        <header>
            <div class="leftHeaderText">MY&nbsp;WEB</div>
            <div class="headerImage"><img src="/Images/alogo.png" /></div>
            <div class="rightHeaderText">PAGE</div>
        </header>

        <nav>
            <div id="burgerMenu">
                <div></div>
                <div></div>
                <div></div>
            </div>

            <ul id="menuBar">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Parent 1</a>
                    <ul>
                        <li>
                            <a href="#">Sub Item 1</a>
                            <ul>
                                <li><a href="#">Sub Sub Item1</a></li>
                                <li><a href="#">Sub Sub Item2</a></li>
                                <li><a href="#">Sub Sub Item3</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Sub Item 2</a>
                            <ul>
                                <li><a href="#">Sub Sub Item1</a></li>
                                <li><a href="#">Sub Sub Item2</a></li>
                                <li><a href="#">Sub Sub Item3</a></li>
                                <li><a href="#">Sub Sub Item4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Item 3</a></li>
                        <li><a href="#">Sub Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Parent 2</a></li>
                <li><a href="#">Parent 3</a></li>
            </ul>
        </nav>

        <main>


<div class="heroBanner">
    <p>
        Welcome to the new website.<br />
        <br />
        Soon you will be able to do stuff here<br />
        You'll be able to do this and that.<br />
        There will also be a thingymabob<br />
        <br />
        Check back soon.
    </p>
</div>



<div class="vmContainer">
    <div class="vmItem">
        <div class="header">Item1</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 2</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 3</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 4</div>
        <div class="item"></div>
    </div>
</div>
        </main>

        <footer>
            <ul>
                <li>Copyright &copy; 2017</li>
                <li>Contact Us</li>
                <li><a href="#" target="_blank"><img src="/Images/FB-f-Logo__white_29.png" /></a></li>
                <li><div class="fb-like" data-href="https://www.facebook.com/#" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div></li>
            </ul>
        </footer>
    </div>

    <script src="/bundles/jquery?v=JzhfglzUfmVF2qo-weTo-kvXJ9AJvIRBLmu11PgpbVY1"></script>



    <script type="text/javascript">
        $(document).ready(function () {
            $('#burgerMenu').on('click', function () {
                var mb = $('#menuBar');
                if ($(mb).height() == 0)
                    $(mb).height('100%');
                else
                    $(mb).height(0);
            })
        })
    </script>
</body>
</html>

[CSS(LESS)]

@primaryTextColour: #123456;
@linkHoverColour: #ff6a00;
@htmlBG: #000;
@primaryBGColour: #fff;
@headerTextColour: #000;
@primaryBorderColour: #123456;
@pageBorderSize: 30px;
@menuHoverBGColour: #dcefff;


html {
    background-color: @htmlBG;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: @htmlBG;
    color: @primaryTextColour;
    margin: 0;
    font-family: Moon;
    height: 100%;
}

body > div {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    max-width: 80%;
    min-width: 730px;
    margin: auto;
    min-height: 100vh;
    background-color: @primaryBGColour;

    header {
        -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
        -ms-flex-order: 1; /* TWEENER - IE 10 */
        -webkit-flex-order: 1;
        order: 1;
        -ms-flex: 0 1 100%;
        -webkit-flex: 0 1 100%;
        flex: 0 1 100%;
        font-weight: bold;
        font-size: 3em;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        //display: none;
        .headerImage {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
            -ms-flex-order: 2; /* TWEENER - IE 10 */
            order: 2;

            img {
                background: url(/Images/mcmlogo.png);
                background-size: 200px 200px;
                width: 200px;
                height: 200px;
                border: 0 none #000;
            }
        }

        .leftHeaderText {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
            -ms-flex-order: 1; /* TWEENER - IE 10 */
            -webkit-flex-order: 1;
            order: 1;
        }

        .rightHeaderText {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
            -ms-flex-order: 3; /* TWEENER - IE 10 */
            -webkit-flex-order: 3;
            order: 3;
        }
    }

    main {
        -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
        -ms-flex-order: 3; /* TWEENER - IE 10 */
        -webkit-flex-order: 3;
        order: 3;
        -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        padding: 30px 0;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: stretch;
    }

    aside {
        -webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 4; /* OLD - Firefox 19- */
        -ms-flex-order: 4; /* TWEENER - IE 10 */
        -webkit-flex-order: 4;
        order: 4;
        -ms-flex: 0 1 200px;
        -webkit-flex: 0 1 200px;
        flex: 0 1 200px;
    }

    footer {
        -webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 5; /* OLD - Firefox 19- */
        -ms-flex-order: 5; /* TWEENER - IE 10 */
        -webkit-flex-order: 5;
        order: 5;
        -ms-flex: 0 1 100%;
        -webkit-flex: 0 1 100%;
        flex: 0 1 100%;
        background-color: @primaryBorderColour;
        color: @linkHoverColour;
        font-weight: bold;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        height: 50px;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: stretch;

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            -ms-flex: 0 1 100%;
            -webkit-flex: 0 1 100%;
            flex: 0 1 100%;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex;
            -ms-flex-flow: row nowrap;
            -webkit-flex-flow: row nowrap;
            flex-flow: row nowrap;
            justify-content: space-around;

            a, a:link, a:visited, a:focus, a:hover, a:active {
                -ms-flex: 0 1;
                -webkit-flex: 0 1;
                flex: 0 1;
                text-decoration: none;
                font-weight: bold;
                color: @linkHoverColour;
                white-space: nowrap;
            }

            li {
                -ms-flex: 0 1;
                -webkit-flex: 0 1;
                flex: 0 1;
                display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox; /* TWEENER - IE 10 */
                display: -webkit-flex; /* NEW - Chrome */
                display: flex;
                -ms-flex-flow: column nowrap;
                -webkit-flex-flow: column nowrap;
                flex-flow: column nowrap;
                justify-content: center;
            }
        }
    }

    @media screen and (max-width: 768px) {
        max-width: 100%;
        min-width: 320px;

        header {
            -ms-flex-flow: column;
            -webkit-flex-flow: column;
            flex-flow: column;
            justify-content: flex-start;
            align-items: center;
            font-size: 2em;

            .headerImage {
                -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
                -ms-flex-order: 1; /* TWEENER - IE 10 */
                -webkit-flex-order: 1;
                order: 1;

                img {
                    background-size: 150px 150px;
                    width: 150px;
                    height: 150px;
                }
            }

            .leftHeaderText {
                -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
                -ms-flex-order: 2; /* TWEENER - IE 10 */
                -webkit-flex-order: 2;
                order: 2;
            }

            .rightHeaderText {
                -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
                -ms-flex-order: 3; /* TWEENER - IE 10 */
                -webkit-flex-order: 3;
                order: 3;
            }
        }

        footer {
            height: unset;

            ul {
                -ms-flex-flow: column nowrap;
                -webkit-flex-flow: column nowrap;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: center;

                li {
                    padding: 5px;
                }
            }
        }
    }

    @media screen and (max-width: 320px) {
        header {
            -ms-flex-flow: row;
            -webkit-flex-flow: row;
            flex-flow: row;
            justify-content: space-around;
            align-items: center;
            font-size: 1.2em;

            .headerImage {
                -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
                -ms-flex-order: 2; /* TWEENER - IE 10 */
                -webkit-flex-order: 2;
                order: 2;

                img {
                    background-size: 75px 75px;
                    width: 75px;
                    height: 75px;
                }
            }

            .leftHeaderText {
                -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
                -ms-flex-order: 1; /* TWEENER - IE 10 */
                -webkit-flex-order: 1;
                order: 1;
            }

            .rightHeaderText {
                -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
                -ms-flex-order: 3; /* TWEENER - IE 10 */
                -webkit-flex-order: 3;
                order: 3;
            }
        }
    }
}


/* Hero Banner */

.heroContainer {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    background-color: @primaryBorderColour;
    height: 300px;

    button {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        margin: 10px;
        height: 50px;
        width: 50px;
        border: 3px solid black;
        background: transparent;
        font-weight: bold;
        font-size: 30px;
        border-radius: 25px 25px;
        opacity: .1;

        &:hover {
            opacity: .25;
        }
    }

    .heroLeftFader {
        -ms-flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        flex: 0 1 25%;
        background: linear-gradient(to left, transparent, lighten(@primaryBorderColour, 50));
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-start;
    }

    .heroRightFader {
        -ms-flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        flex: 0 1 25%;
        background: linear-gradient(to right, transparent, lighten(@primaryBorderColour, 50));
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-end;
    }
}

@media screen and (max-width: 768px) {
    .heroContainer {
        height: 175px;
    }
}

@media screen and (max-width: 320px) {
    .heroContainer {
        display: none;
    }
}

/* visual menu box */

.vmContainer {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    padding: 30px;

    .vmItem {
        -ms-flex: 0 1 auto;
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        width: 200px;
        height: 250px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        border: 2px solid @primaryBorderColour;
        margin: 10px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .header {
            -ms-flex: 0 1 50px;
            -webkit-flex: 0 1 50px;
            flex: 0 1 50px;
            background-color: @primaryBorderColour;
            color: @linkHoverColour;
            font-weight: bold;
            font-size: 1.5em;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex;
            -ms-flex-flow: row;
            -webkit-flex-flow: row;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
        }

        .item {
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            overflow: hidden;

            img {
                height: 100%;
                width: 100%;
            }
        }
    }
}

.heroBanner {
    -ms-flex: 0 1;
    -webkit-flex: 0 1;
    flex: 0 1;
    //position: absolute;
    color: @linkHoverColour;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}

body > div > nav {
    -ms-flex: 0 1 100%;
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
    -ms-flex-order: 2; /* TWEENER - IE 10 */
    -webkit-flex-order: 2;
    order: 2;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    border-top: 1px solid @primaryBorderColour;
    border-bottom: 1px solid @primaryBorderColour;

    #burgerMenu {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        padding: 7px;
        display: none;
        background-color: @primaryBorderColour;
        color: @linkHoverColour;
        font-weight: bold;


        div {
            width: 25px;
            height: 3px;
            background-color: @linkHoverColour;
            margin: 4px 0;
            border-radius: 10px 10px;
        }
    }

    #menuBar {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: stretch;
        padding: 0;
        margin: 0;
        overflow: hidden;

        a, a:link, a:visited, a:focus, a:hover, a:active {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            text-decoration: none;
            font-weight: bold;
            color: @primaryTextColour;
            white-space: nowrap;
        }

        li {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            list-style-type: none;
            -moz-transition: background-color ease-in .1s;
            -o-transition: background-color ease-in .1s;
            -webkit-transition: background-color ease-in .1s;
            transition: background-color ease-in .1s;
            padding: 5px;

            &:hover {
                background-color: @menuHoverBGColour;

                > a {
                    color: @linkHoverColour;
                }

                > ul {
                    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
                    display: -ms-flexbox; /* TWEENER - IE 10 */
                    display: -webkit-flex; /* NEW - Chrome */
                    display: flex;
                }
            }
        }

        ul {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            display: none;
            -ms-flex-flow: column nowrap;
            -webkit-flex-flow: column nowrap;
            flex-flow: column nowrap;
            position: absolute;
            justify-content: space-around;
            align-items: stretch;
            box-shadow: -3px 3px 5px rgba(0,0,0,.25);
            background-color: @primaryBGColour;
            -moz-animation: fadein .5s;
            -o-animation: fadein .5s;
            -webkit-animation: fadein .5s;
            animation: fadein .5s;
            padding: 0;

            ul {
                left: 50%;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    body > div > nav {
        #burgerMenu {
            display: block;
        }

        #menuBar {
            -ms-flex-flow: column nowrap;
            -webkit-flex-flow: column nowrap;
            flex-flow: column nowrap;
            justify-content: flex-start;
            height: 0;

            ul {
                position: relative;
                box-shadow: none;

                ul {
                    left: unset;
                }
            }
        }
    }
}

@media screen and (min-width: 769px) {
    body > div > nav {
        #menuBar {
            height: 100% !important;
        }
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

Thanks

StuartMc
  • 666
  • 7
  • 12
  • possible guidance: [Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/a/35137869/3597276) – Michael Benjamin Mar 13 '17 at 18:46
  • I don't know... I'm thinking I might have to dissect the site and see if it's a specific part that's breaking it. – StuartMc Mar 13 '17 at 18:48
  • Would try to assist further, but don't have Safari at the moment. – Michael Benjamin Mar 13 '17 at 18:50
  • Yeah apple apparently stopped supporting safari for windows so I can't test in a recent version. I'm having to make changes upload to a test site and try it on my phone. Makes debugging rather difficult lol. – StuartMc Mar 13 '17 at 18:53

1 Answers1

1

Your use of flex is overexcessive; its being used in areas where it isn't needed and hence it's causing unnecessary problems across browsers.

Flexbox is only supported on relatively new browsers (IE10+, see this link for all browser compatibilities), so supporting anything below that is out of the question. Also, I think you should read up on the use of the shorthand "flex" as removing it in inspector on Safari will solve many of your layout issues.

This is an excellent guide to understand how flex works.

Jack Wong
  • 186
  • 4
  • Thank you... I will be looking into this today. CSS Tricks is where I learned how to use flexboxs so I guess I must've missed a trick so to speak... as I understood it, for a flex child items children to be flex then the flex child has to be display: flex also... is that where I've gone wrong? – StuartMc Mar 15 '17 at 09:14
  • Thank you... I tidied up the CSS and removed the unneeded flex stuff and that fixed it. Much appreciated. – StuartMc Mar 15 '17 at 13:57