Weird CSS Transition Issue - html

Question

I'm using transition property in CSS in the navigation on my website. The navigation consists of 3 images. When you hover the image with the mouse, a transition is applied that displays an overlay with some text. This all works beautifully in Chrome and Firefox. Safari, however, is a mess. Not only does the transition behaviour not work at all, but no matter what I do, the menu stays on a second line rather than remaining on the first line with the logo (you'll see from the jsfiddle example what I mean if you open the fiddle in both Chrome and Safari).
CSS:
header nav a img {
width: 100%;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
.menuitem-content {
top: 15px;
padding: 5px;
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
vertical-align: middle;
color: #FFFFFF;
background-color: rgba(86, 81, 65, .8);
display: none;
transition: all 1.2s;
-webkit-transition: all 1.2s;
-moz-transition: all 1.2s;
font-size: 14pt;
z-index: 999;
left: 0px;
}
header nav a:hover > .menuitem-content {
display: inline-flex;
}
https://jsfiddle.net/35qnu4d1/
You might have to expand the output window a bit to see the menu and logo on the same line (which for our purposes is fine as the min resolution should be 1024x768 — this isn't build for mobile devices). Any ideas why it's behaving so weird in Safari?

Answer 1

Use http://caniuse.com/#search=flex, you need -webkit-... vendor prefixes for all flex properties.
display isn't animatable property. You can't apply transition to it. See this list of animatable CSS properties.
You don't need to use display: inline-flex with position: absolute — display: block is enough.
Check out my JSFiddle.
CSS:
header {
width: 100%;
background-color: #565141;
overflow: hidden;
display: -webkit-flex;
display: flex;
}
header nav a:hover > .menuitem-content {
display: block;
}
#content-body {
background-color: #efefef;
width: 97%;
padding: 15px;
display: -webkit-flex;
display: flex;
}
footer {
width: 100%;
background-color: #565141;
display: -webkit-flex;
display: flex;
}