IE11 запускает css-переход на загрузку страницы при отсутствии прикладного медиа-запроса

У меня есть ситуация, которая возникает только в IE11. Chrome, Firefox, Safari (планшет и телефон) работают нормально. Я создал переход для панели (DIV), которая скользит в сторону/из стороны. В pageload он НЕ должен "анимироваться", но привязывается к соответствующей позиции. Но в IE11, когда страница загружается, переход "воспроизводится" ТОЛЬКО, если есть медиа-запрос, связанный с этим элементом, соответствующий наивысшему уровню специфичности CSS для селектора. Странно, что медиа-запрос не подходит (никогда не должен применяться, когда страница загружается в мой тест).

Следующий простой код дублирует мою проблему:

CSS

.standard {
  transition: all 1s ease-in-out;
  transform: rotate(45deg);
  width:50px;  height:50px;  border:1px solid black;  background-color:green;   margin:3em;
}

button + .standard {
  transform: rotate(30deg);
}

button.on + .standard {
  transform:rotate(0deg);
}

/* REMOVE THE FOLLOWING COMMENTS to see issue on page load using IE11 - make sure window is larger than 800 pixels */
/*
@media only screen and (max-width:800px) {
  button.on + .standard {
    background-color:red;
    transform:rotate(270deg);
  }
}
*/

HTML

<button class="on" onclick="this.classList.toggle('on');">Rotate Test</button>
<div class="standard">&nbsp;</div>

Таким образом, если размер окна браузера превышает 800 пикселей, запрос на печать не должен применяться. Тем не менее, IE11, похоже, действует так, как будто он применяет медиа-запрос, а затем возвращается обратно к CSS без мультимедийных запросов, который фактически инициирует переход. Если селектор содержимого медиапроцессора не соответствует наивысшему уровню специфичности CSS, определенному вне медиа-запроса, переход не будет наблюдаться при загрузке страницы (другими словами, если мой селектор CSS для медиапроцессора был менее конкретным [say button + .standard], вы не увидите, что переход "играл" ).

Любые идеи о том, как предотвратить этот переход от "игры" при загрузке страницы с помощью IE11 без необходимости писать javascript?

Ответ 1

Работала с поддержкой MicroSoft и зарегистрировала ошибку. Существует обходной путь для этой проблемы.

Вместо использования медиа-запроса

@media only screen and (max-width:800px)

измените запрос следующим образом:

@media only screen and (min-width:1px) and (max-width:800px)

Это не должно быть обязательным (это должно быть подразумевается), но установка минимальной ширины в запросе разрешает "ИГРАТЬ" перехода на загрузку страницы. MS должна исправить это, но поскольку есть обходной путь, вероятность быстрой явки низкая.

Ответ 2

Не полностью javascript-решение, но вы можете добавить класс на всю страницу тега body:

body.pageload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

и удалить этот класс после загрузки страницы

$("window").load(function() {
    $("body").removeClass("pageload");
});

Ответ 3

Ответ пользователя3546826 работает, когда окно больше определенного max-width. Когда окно меньше, чем переход по-прежнему анимируется IE/Edge. Этого можно избежать с помощью следующего обходного пути (пример):

#sidebar-wrapper {
  position: fixed;
  width: 240px;
  bottom:0;
  right:0;
  top:50px;
  overflow: hidden;
  -webkit-transition: left 0.4s ease-in-out;
  -moz-transition: left 0.4s ease-in-out;
  -o-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
}
@media screen and (min-width: 768px) {
  #sidebar-wrapper {
    left: 0; /* define left here for IE / Edge */
  }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
  #sidebar-wrapper {
    left: -240px;
  }
}