IE/Edge - CSS3 transitions firing on navigate

Question

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

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.

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

Answer 1

I've found the solution.

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.

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.

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.