Hey guys I recently built this website HERE, and I used flexbox and autoprefixer to align a lot of stuff on this website.

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

enter image description here

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, and IE 10+, everything works fine in recent browsers.

From what I could gather after visiting multiple SO threads is that 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 safari 5.1.10.

So can somebody explain 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.

Can somebody explain what am I doing wrong ?

Thank you.

2 Answers

11
Michael_B On Best Solutions

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?

6
Jantho1990 On

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

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