位置转换在 Edge 中不起作用

Question

所以我在一个元素上有一个动画，它改变了背景颜色，并将底部位置从父级的垂直中心更改为底部。

我刚刚在 Edge 中做了一个测试，背景工作正常，但底部过渡不是。它只是瞬间改变。

我确实意识到翻译可能会起作用，但我有兴趣知道顶部、右侧、底部、左侧的定位是否不适用于 Microsoft 浏览器中的转换？它在 Firefox、Chrome 和 Safari 中运行良好。

我的 CSS 如下所示。

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

标记：

<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 有固定的高度

Answer 1

我遇到了同样的问题，并通过比较我们的代码设法找出出了什么问题。

这是 Edge 不喜欢的部分：

bottom: calc(50% - 30px);

当与 calc() 结合使用时，Edge 目前（EdgeHTML v14.14393）似乎不支持转换。