У меня есть ситуация, которая возникает только в 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"> </div>
Таким образом, если размер окна браузера превышает 800 пикселей, запрос на печать не должен применяться. Тем не менее, IE11, похоже, действует так, как будто он применяет медиа-запрос, а затем возвращается обратно к CSS без мультимедийных запросов, который фактически инициирует переход. Если селектор содержимого медиапроцессора не соответствует наивысшему уровню специфичности CSS, определенному вне медиа-запроса, переход не будет наблюдаться при загрузке страницы (другими словами, если мой селектор CSS для медиапроцессора был менее конкретным [say button + .standard
], вы не увидите, что переход "играл" ).
Любые идеи о том, как предотвратить этот переход от "игры" при загрузке страницы с помощью IE11 без необходимости писать javascript?