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
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().
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With