html - 奇怪的 CSS 过渡问题

Question

我在我网站的导航中使用 CSS 中的 transition 属性。导航由 3 个图像组成。当您用鼠标悬停图像时，将应用transition，显示带有一些文本的叠加层。这一切在 Chrome 和 Firefox 中都能完美运行。然而，Safari 却一团糟。不仅过渡行为根本不起作用，而且无论我做什么，菜单都会停留在第二行，而不是保留在带有 Logo 的第一行(您将从 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/

您可能需要稍微扩展输出窗 Eloquent 能在同一行看到菜单和 Logo (这对于我们的目的来说很好，因为最小分辨率应该是 1024x768 — 这不是构建用于移动设备)。知道为什么它在 Safari 中表现如此奇怪吗？

Answer 1

1. 使用 http://caniuse.com/#search=flex ，您需要为所有 flex 属性添加 -webkit-... 供应商前缀。

2. display不是 animatable 属性。您不能对其应用 transition。看这个list of animatable CSS properties .

3. 您不需要将 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;
}