奇怪的 CSS 过渡问题答案

【问题标题】：Weird CSS Transition Issue奇怪的 CSS 过渡问题
【发布时间】：2015-08-06 07:42:28
【问题描述】：

我在我网站的导航中使用 CSS 中的 transition 属性。导航由 3 个图像组成。当您使用鼠标hover 图像时，将应用transition 以显示带有一些文本的叠加层。这一切都可以在 Chrome 和 Firefox 中完美运行。然而，Safari 是一团糟。不仅转换行为根本不起作用，而且无论我做什么，菜单都停留在第二行，而不是与徽标一起停留在第一行（您将从 jsfiddle 示例中看到我的意思，如果您打开Chrome 和 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/

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

【问题讨论】：

您还需要为 Safari 添加display: -webkit-inline-flex;。但据我所知，您可以简单地使用display: block;

标签： html css safari css-transitions

【解决方案1】：

使用http://caniuse.com/#search=flex，所有flex 属性都需要-webkit-... 供应商前缀。
display 不是 animatable 属性。您不能对其应用transition。看到这个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;
}

【讨论】：