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。它应该是立即25px，正如CSS所暗示的那样。

不需要的动画似乎是在导航而不是加载时触发。加载页面上的F5一旦加载就不会显示动画，一切都按预期显示。导航到站点内的新页面导致例如导航栏动画从50px到25px，<main>元素从100％宽度设置动画到视口的相应指定宽度。这是一种最刺耳的效果。

非常感谢任何建议。我继续调查此问题。

Ilmiont

Answer 1

我找到了解决方案。

这是IE / Edge特定的问题。 this question的作者在2014年与Microsoft支持部门联系时发现了一个非常相似的声音问题。目前还没有修复，无论是在EdgeHTML还是IE中。

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

我将使用EdgeHTML问题跟踪器提交我自己的错误报告。据报道这已有两年了，我们仍然有一些奇怪的解决方法。