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

IE11 triggers css transition on page load when non-applied media query exists

我有一种情况仅在IE11上发生。 Chrome，Firefox，Safari(平板电脑和手机)均可按预期工作。我为面板(DIV)创建了一个过渡，该过渡从侧面滑入/滑出。在页面加载时，它不应"动画"，而应捕捉到适当的位置。但是在IE11上，当页面加载时，仅当与该元素相关的媒体查询与选择器的最高CSS特定性匹配时，才"播放"过渡。奇怪的是，媒体查询甚至不合适(在我的测试中加载页面时，永远不要应用它)。

以下简单代码重复了我的问题：

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.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

1	<button class="on" onclick="this.classList.toggle('on');">Rotate Test</button>

因此，如果浏览器窗口的大小大于800像素，则不应应用媒体查询。但是，IE11看起来像是在应用媒体查询，然后恢复为实际触发转换的非媒体查询CSS。如果媒体查询内容选择器与媒体查询外部定义的最高CSS特殊性不匹配，则在页面加载时将不会观察到过渡(换句话说，如果我的媒体查询CSS选择器的特定性较低[say button + .standard] ，则您不会看到"已播放"的过渡)。

有什么想法如何防止这种过渡使用IE11在页面加载时"播放"而无需编写JavaScript？

使用MicroSoft支持并记录了一个错误。没有针对此问题的解决方法。

代替使用媒体查询

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

将查询更改为以下内容：

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

这不是必需的(应隐含)，但在查询中放置最小宽度可解决页面加载时的"播放"过渡。 MS应该修复它，但是由于有解决方法，因此快速投票的可能性很小。