Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Position transition not working in Edge

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

like image 931
Emil Østervig Avatar asked Dec 13 '16 12:12

Emil Østervig


1 Answers

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().

like image 172
shakyjake Avatar answered Oct 17 '22 13:10

shakyjake