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

В этом реальном примере, при загрузке страницы, то Navbar имеет высоту 50px, который затем оживляет в 25px. Предполагается, что это будет 25px сразу, как предложит CSS.

Нежелательные анимации, похоже, срабатывают при навигации, а не в загрузке. Нажатие F5 на странице после его загрузки не отображает анимацию, и все отображается так, как ожидалось. Переход на новую страницу на сайте приводит, например, к navbar, анимирующий от 50 до 25 пикселей, и элемент <main>, анимирующий от 100% ширины до соответствующей назначенной ширины для окна просмотра. Это самый резкий эффект.

Любой совет будет очень благодарен. Я продолжаю расследовать этот вопрос.

Ilmiont

Answer 1

Я нашел решение.

Это проблема с IE/Edge. Автор this question обратился к Microsoft Support с очень похожим вопросом о звукозаписи еще в 2014 году. Пока ничего не исправлено ни в EdgeHTML, ни в IE.

Существует простой способ устранения проблемы - измените медиа-запрос на @media all and (min-height: 1px) and (max-height: 200px), потому что, по-видимому, IE/Edge по какой-то причине применяют несоответствующие медиа-запросы, а затем не реализуют минимальную ширину, несмотря на то, что они неявны в запросе.

Я буду подавать свой собственный отчет об ошибке с помощью трекера EdgeHTML. Об этом сообщается в течение двух лет, и мы по-прежнему остаемся со странными обходными решениями.