Geek Answers Handbook

Why does flexbox simple centering code not work in Safari 5 and 6?

I recently created this site HERE , and I used flexbox and autoprefixer to align many things on this site.

Now, despite the fact that I use 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 centered on the circle. This does not apply to all recent browsers, and in IE 10+ everything works fine in recent browsers.

From what I was able to learn after visiting several SO streams, it can be said that even Safari 5+ supports flex with prefixes. So I have no idea why my flexible code is not working.

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 that my client uses is 5.1.10.

Why, even though I am using prefix code, is my flexbox code still not working?

I also know that some of the advanced flexbox properties may have problems in older browsers that partially support flexbox (like flex-wrap ), but as you can see, I used only the most basic flexbox properties in my example.

What am I doing wrong?

+8
source share
2 answers

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

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

This tells the flex container how to align its children.

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

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

More details here: Flexbox code works in all browsers except Safari. Why?

+11
source

Try adding margin: auto and see if this fixes something.

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

+6
source

More articles:


All Articles