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?

Answer 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;

Answer 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;