IE / Edge-导航时触发CSS3过渡 [英] IE/Edge - CSS3 transitions firing on navigate

问题描述

我在页面上的几个元素上分配了宽度和高度的转换，包括顶部导航栏和< main> 元素。当用户调整页面大小时，元素会进行动画处理以更改其宽度/高度等。

I have transitions for width and height assigned on several elements on my page, including the top navigation bar and the <main> element. As the user resizes the page, the elements animate to change their width/height etc.

除导航到新页面外，此方法工作正常。在页面加载时，元素从其最大分配宽度到其标准宽度进行动画处理。这不是将最大宽度设置为宽度的动画，而是类似以下内容：

This works fine except when navigating to a new page. As the page loads, the elements animate from their maximum assigned width to their standard width. This is not animating from max-width to width but rather something like the following:

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

在此实际示例中，当页面加载时，导航栏的高度为50px，然后动画为25px。

In this real example, when the page loads, the navbar has a height of 50px that then animates to 25px. It is supposed to be 25px immediately, as the CSS would suggest.

不需要的动画似乎是在导航而不是加载时触发的。加载页面后，在页面上按F5不会显示动画，所有内容都会按预期显示。导航至网站内的新页面，例如导航栏从50px变为25px，< main> 元素从100％宽度动画到视口的适当分配宽度。

The unwanted animations appear to be firing on navigate rather than load. Pressing F5 on a page once it's loaded will not display the animations and everything displays as expected. Navigating to a new page within the site results in e.g. the navbar animating from 50px to 25px and the <main> element animating from 100% width to the appropriate assigned width for the viewport. It's a most jarring effect.

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

Any advice would be much appreciated. I'm continuing to investigate the issue.

Ilmiont

推荐答案

我已经找到了解决方案。

I've found the solution.

这是IE / Edge的特定问题。 此问题的作者在2014年就与Microsoft支持小组联系，发现了一个非常类似的问题。无论是在EdgeHTML还是IE中，目前都还没有修复。

This is an IE/Edge-specific issue. The author of this question contacted Microsoft Support with a very similar sounding issue back in 2014. No fix as of yet, either in EdgeHTML or IE.

有一个简单的解决方法可以解决问题-将媒体查询更改为 @media all，并且将（min-height：1px）和（max-height：200px）更改为IE / Edge，因为显然由于某些原因，它们不适用媒体查询，然后实现最小宽度，尽管它在查询中是隐含的。

There's a simple workaround to fix the issue - change the media query to @media all and (min-height: 1px) and (max-height: 200px) because apparently IE/Edge for some reason are applying inappropriate media queries and then not realising a minimum width, despite it being implicit in the query.

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

I'll be filing my own bug report with the EdgeHTML issue tracker. This has been reported for two years and we're still left with strange workarounds.

这篇关于IE / Edge-导航时触发CSS3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！