当存在未应用的媒体查询时,IE11会在页面加载时触发css转换

Question

我的情况只发生在IE11上.Chrome,Firefox,Safari(平板电脑和手机)都按预期工作.我已经创建了一个面板(DIV)的过渡,它从侧面滑入/滑出.在页面加载时,它不应该"动画",而是捕捉到适当的位置.但是在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选择器不太具体[比如说button + .standard],则会没有看到过渡"玩").

任何想法如何防止这种转换从页面加载"播放"使用IE11而不必编写javascript？

Answer 1

使用MicroSoft支持并记录错误.这个问题有一个解决方法.

而不是使用媒体查询

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

将查询更改为以下内容:

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

这不应该是必需的(应该暗示)但是在查询中放置min-width解决了页面加载时转换的"PLAYING".MS应该修复它,但由于有一个解决方法,快速投票率的可能性很低.

Answer 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");
});