IE11 消息栏从底部向上飞而不是从顶部缓动答案

【问题标题】：IE11 message bar flies up from bottom instead of easing in from topIE11 消息栏从底部向上飞而不是从顶部缓动
【发布时间】：2018-08-22 22:29:58
【问题描述】：

我有一个隐藏的消息栏，除非服务器响应消息以呈现某些内容（例如“密码和用户名无效。”）。然后它从顶部缓入以显示消息。

在最新版本的 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;
    }
}

【问题讨论】：

这听起来像是在转换中使用 vw 和 vh 单位的 IE 特定错误。 stackoverflow.com/questions/42454352/…
您可以使用百分比单位代替，具体取决于容器元素的位置和大小。

标签： css sass css-transitions internet-explorer-11

【解决方案1】：

arbutthnot 让我指出了正确的方向。事实证明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 显然没有做任何事情，所以就这样保持原样。现在所有主流浏览器的性能都差不多。

【讨论】：