How is possible that "display: flex" and "align-items: center" do not work anymore on my iphone?

Question

Hello guys is really strange what happened to me today ... I'm working on a code to create submenus, and I used the property

 display: -webkit-flex;
 display: flex;
 align-items: center;

in this way the voices of the various sections (tags li) are centered vertically. I have used these properties many times before for other codes and they have always worked correctly. As always, I check the code on my mac, on the iPhone 5, on firefox and chrome.

But as soon as I see the file via my iphone 5 (version 8.3) I was shocked .... the properties were not working. I have displayed the old files and even with them the same problem occurred.

The amazing thing is that the mc works wonderfully well with the iPhone 5 to my brother (updated to version 9.x):

I do not understand .... but how is that possible?

It 'a bug? or my iphone is broken?

Solution 1

There is a flexbox bug in Safari:

The <button> and <fieldset> elements can't be flex containers in Safari.

Solution: use a different wrapping element, e.g. an <a> tag.

If you can't or don't want to change the element, you can fix it using box-orient:

display: -webkit-box;
-webkit-box-orient: horizontal;

Solution 2

For me to get vertical and horizontal central alignment across Safari and Chrome on iOS and desktop I had to use:

display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;

Solution 3

Should I Prefix recommends that flexbox still be vendor-prefixed. Anecdotally, I would say that it really only needs to be prefixed on Safari.

This means not only vendor prefixing your display settings, but all Flex box properties:

 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;

Comments

[Luís P. A.]

Add vendor prefix -webkit-align-items:center;

[Borja]

@LuisP.A. wow you are right... but how is possible ? before worked

[Reggie Pinkham]

-webkit- prefixes are no longer required for flex layouts as of iOS 9+

[Sølve T.]

The amount of times i come back to this answer is stupid. Really thankful for the answer! 😀

[Teilmann]

This works with the flex box and orientation, but i cannot use align items og justify-content, even with vendor prefixes

[Marcelo Cardoso]

Here is a useful link for those facing cross-browser issues: github.com/philipwalton/…