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

Question

I have a message bar that is hidden unless the server responds with a message to render something (e.g. "The password and username are invalid."). Then it eases in from the top to display the message.

In latest versions of Chrome, Edge, Safari, and Firefox, this is working fine. In IE, it flies up from the bottom of the browser, across the viewing area, and then mounts where it should be when it is viewable.

This is the Sass that I have. I've been toying with the transform and transition to get the correct results, without affecting other browsers. I not been able to, so looking for suggestions:

#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 got me pointed in the right direction. It turns out px works as well so I used that instead. Was having a hard time getting % to behave the same as it did in other browsers.

Used this tool to translate vh to px:

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

And ended up with this:

.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        
}

The 0vh on the other two classes apparently wasn't doing anything so left that as is. Now all major browsers perform similarly.