How is it possible that "display: flex" and "align-items: center" no longer work on my iphone?

Question

Hi guys, it's really weird what happened to me today ... I'm working on code to create a submenu, and I used the property

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

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

But as soon as I see the file through my iphone 5 (version 8.3), I was shocked ... the properties did not work. I displayed the old files and even the same problem arose with them.

enter image description here

It's amazing that mc works fine with my brother's iPhone 5 (updated to version 9.x):

http://i.stack.imgur.com/1bHhT.jpg

... ?

? iphone ?

Answer 1

Safari flexbox bug:

<button> <fieldset> Safari.

: , . <a>.

, , box-orient:

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

Answer 2

, flexbox - . , Safari.

, , , Flex:

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

Answer 3

To get vertical and horizontal center alignment on Safari and Chrome on iOS and on the desktop, I had to use:

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