IE/Edge - CSS3在导航时触发过渡

Question

我在页面上的几个元素上分配了宽度和高度的过渡，包括顶部导航栏和<main>元素。当用户调整页面大小时，这些元素会改变它们的宽度/高度等。

除了导航到一个新页面时，这很好。当页面加载时，元素从它们的最大分配宽度移动到它们的标准宽度。这不是从max-width到width的动画，而是类似于以下内容:

nav {
    height: 25px;
    transition: all 0.2s ease-in-out;
}
@media all and (max-height: 200px) {
    nav {
        height: 50px;
    }
}

在这个真实的例子中，当页面加载时，导航条的高度为50px，然后动画为25px。根据CSS的建议，它应该立即为25px。

不需要的动画似乎是在导航而不是加载时触发的。在页面上按F5，一旦它被加载将不会显示动画和一切显示预期。导航到站点内的新页面导致导航条从50px动画到25px, <main>元素从100%宽度动画到viewport的适当分配宽度。这是一个非常不和谐的效果。

如有任何建议将不胜感激。我正在继续调查这个问题。

Ilmiont

Answer 1

我找到解决办法了。

这是IE/edge特有的问题。这个问题的作者在2014年联系了微软支持部门，提出了一个非常类似的问题。目前还没有修复，无论是在EdgeHTML还是IE。

有一个简单的解决方法来解决这个问题-将媒体查询更改为@media all and (min-height: 1px) and (max-height: 200px)，因为显然IE/Edge由于某种原因正在应用不适当的媒体查询，然后没有实现最小宽度，尽管它在查询中隐含。

我将提交我自己的错误报告与EdgeHTML问题跟踪器。这已经报道了两年了，我们仍然有奇怪的解决办法。