IE11 消息栏从底部飞起而不是从顶部缓入

Question

我有一个隐藏的消息栏，除非服务器响应消息以呈现某些内容（例如 "The password and username are invalid."）。然后它从顶部缓入以显示消息。

在最新版本的 Chrome、Edge、Safari 和 Firefox 中，这工作正常。在 IE 中，它从浏览器的底部向上飞，穿过可视区域，然后挂载在它应该处于可视位置的位置。

这是我的Sass。我一直在玩弄 transform 和 transition 以获得正确的结果，而不影响其他浏览器。我做不到，所以寻求建议：

#messages {
    z-index: 999;
    position: fixed;
    width: 100%;

    .container {
        max-width: 890px;

        @media (max-width: 992px) and (min-width: 768px) {
            max-width: 720px;

        }

        @media (max-width: 767px) and (min-width: 576px) {
            max-width: 510px;
            padding-left: 0px;
            padding-right: 0px;
        }
    }

    a {
        color: #FFF;
        font-weight: bold;
    }

    i {
        cursor: pointer;
        padding-top: 3px;
    }

    .hide-messages-bar {
        color: #FFF;
        position: relative; 
        top: 105px;
        transform: translateY(-5vh);
        transition: transform 0.5s ease-in-out;   
        box-shadow: 0 1px 6px 2px #333        
    }

    .hide-messages-bar.show-success-messages-bar {
        background-color: $green;                
        transform: translateY(0vh);
        padding: 8px 0;
    }

    .hide-messages-bar.show-error-messages-bar {
        background-color: $red;                
        transform: translateY(0vh);
        padding: 8px 0;
    }
}

Answer 1

arbuthnott 为我指明了正确的方向。事实证明 px 也有效，所以我改用它。很难让 % 的行为与在其他浏览器中一样。

使用此工具将 vh 翻译成 px:

https://jsfiddle.net/Dwaaren/j9zahaLL/

最后是这样的：

.hide-messages-bar {
    color: #FFF;
    position: relative; 
    top: 105px;
    transform: translateY(-22.3px);
    transition: transform 0.5s ease-in-out;   
    box-shadow: 0 1px 6px 2px #333        
}

其他两个类上的 0vh 显然没有做任何事情，所以保持原样。现在所有主流浏览器的性能都差不多。

IE11 消息栏从底部飞起而不是从顶部缓入

IE11 message bar flies up from bottom instead of easing in from top

css

sass

css-transitions

internet-explorer-11