奇怪的 CSS 过渡问题

Question

我在我网站的导航中使用 transition 属性 in CSS。导航由 3 个图像组成。当您使用鼠标 hover 图像时，会应用 transition 显示带有一些文本的叠加层。这一切在 Chrome 和 Firefox 中运行良好。然而，Safari 却一团糟。不仅过渡行为根本不起作用，而且无论我做什么，菜单都停留在第二行而不是保留在带有徽标的第一行（您将从 jsfiddle 示例中看到什么我的意思是，如果您在 Chrome 和 Safari 中都打开 fiddle。

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/

您可能需要稍微扩展输出 window 才能在同一行看到菜单和徽标（这对我们来说很好，因为最小分辨率应该是 1024x768 — 这是'为移动设备构建）。知道为什么它在 Safari 中表现如此奇怪吗？

Answer 1

使用 http://caniuse.com/#search=flex，所有 flex 属性都需要 -webkit-... 供应商前缀。
display isn't animatable property. You can't apply transition to it. See this list of animatable CSS properties.
您不需要将 display: inline-flex 与 position: absolute 一起使用 — display: block 就足够了。

看看我的 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;
}

奇怪的 CSS 过渡问题

Weird CSS Transition Issue

html

css

safari

css-transitions