Position transition not working in Edge

Question

So i have an animation on an element, which changes background-color, and changes the bottom position from vertical center of parent to bottom.

I just did a test in Edge, and the background is working fine but the bottom transition isnt. It just changes instantly.

I do realize translate would probably work, but i'm interested in knowing wether positioning as in top, right, bottom, left does not work with transitions in Microsoft browsers? It works perfectly fine in Firefox, Chrome and Safari.

My CSS is shown below.

.heading-bg{
    display: table;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    bottom: calc(50% - 30px);

    -webkit-transition: bottom .5s ease-out, background-color .4s ease-out;
    -moz-transition: bottom .5s ease-out, background-color .4s ease-out;
    -ms-transition: bottom .5s ease-out, background-color .4s ease-out;
    -o-transition: bottom .5s ease-out, background-color .4s ease-out;
    transition: bottom .5s ease-out, background-color .4s ease-out;
}

.gallery-item:hover .heading-bg{
    bottom: 0px;
    background-color: rgba(0,0,0,0.7);

    -webkit-transition: bottom .6s ease-out, background-color .4s ease-out;
    -moz-transition: bottom .6s ease-out, background-color .4s ease-out;
    -ms-transition: bottom .6s ease-out, background-color .4s ease-out;
    -o-transition: bottom .6s ease-out, background-color .4s ease-out;
    transition: bottom .6s ease-out, background-color .4s ease-out;
}

Markup:

<div class="gallery-item">
    <a href="www.example.com">
        <div class="gallery-item-inner">
            <div class="heading-bg">
                <h3>Gallery name</h3>
            </div>
        </div>
    </a>
</div>

.gallery-item has a fixed height

Updated. The issue isn't the .heading-bg element not getting its bottom: 0px position. The issue is, that the transition isn't working on Edge or previous IE versions emulated in Edge. So the change in bottom position happens instantly instead of the .6 seconds. — Emil Østervig
If you change the parent:hover to an actual class, like .gallery-item:hover it will work ... there is no such thing as parent in css — Asons
Sorry, parent was an example class from before i added the markup. It doesnt work. Like i said, the css hover effect happens, but it's not animated. The transition never triggers on edge. — Emil Østervig
you should use translate3d in place of position animations: translate3d(0, 0, 0) -> translate3d(0, -calc(50% - 30px), 0). Remove bottom: 0px: from the hover state. This does not answer your question, it's just an improvement to your code. — borislemke

shakyjake shakyjake · Accepted Answer · 2017-04-03T11:27:14

I had the same problem and managed to figure out what's wrong by comparing both our code.

Here's the part that Edge doesn't like:

bottom: calc(50% - 30px);

It appears that Edge currently (EdgeHTML v14.14393) doesn't support transitions when used in conjunction with calc().

Position transition not working in Edge

2 Answers