Weird CSS Transition Issue

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

1. Use http://caniuse.com/#search=flex, you need -webkit-... vendor prefixes for all flex properties.

2. display isn't animatable property. You can't apply transition to it. See this list of animatable CSS properties.

3. 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;
}