Why is flexbox code not working in Safari 5 and 6?

Question

I used flexbox and autoprefixer to align a lot of stuff on this website.

Now in spite of me using autoprefixer, my client sent me the following screenshots of one of the sections:

As you can see the images are not aligned in the center of the circle. This is not the case in all of the recent browsers, including IE 10+.

From what I could gather after visiting multiple SO threads, even Safari 5+ supports flex with prefixes. So I have no idea why my flex code is not working.

The HTML:

<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2">
    <a href="">
        <img src="images/focus-feature-points/2.jpg" alt="focus point">
    </a>
    <figcaption>
        <h3>Engaging Educational Games</h3>
    </figcaption>
</figure>

And the CSS for the <a> tag is as follows:

.focus-point > a {
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 3px solid;
    display: inline-block;
    height: 260px;
    width: 260px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all .3s;
    transition: all .3s;
}

The version of Safari my client is using is 5.1.10.

Why in spite of me using prefixed code, my flexbox code still does not work?

I am also aware that some advanced flexbox properties might have problems in older browsers that do support flexbox partially (eg. flex-wrap), but as you can see I have only used the most basic flexbox properties in this example of mine.

What am I doing wrong?

Answer 1

Safari versions prior to 6.1 support a previous version of the flexbox specification (source).

For Safari 5.0, 5.1 and 6.0, in addition to display: -webkit-box (which is the display: flex of that time), you need to use the -webkit-box-orient property.

This tells the flex container how to align its children.

The initial value is inline-axis. Try using vertical or horizontal.

This is the section in the spec with the details: https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation

More details here: Flexbox code working on all browsers except Safari. Why?

Answer 2

Try adding margin: auto and see if that fixes things.

https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.sbo7eyw65