当存在未应用的媒体查询时，IE11在页面加载时触发css转换 [英] IE11 triggers css transition on page load when non-applied media query exists

问题描述

我有一种情况，只发生在IE11。 Chrome，Firefox，Safari（平板电脑和手机）都能正常运作。我为一个面板（DIV）创建了一个过渡，它从侧面滑入/拉出。在pageload上，它不应该动画，但捕捉到适当的位置。但在IE11，当页面加载转换是播放只有如果有媒体查询涉及的元素匹配的选择器的最高水平的CSS特异性。奇怪的是，媒体查询是不合适的（应该在我的测试中加载网页时不应用）。

I have a situation which only occurs on IE11. Chrome, Firefox, Safari (tablet and phone) all work as expected. I have created a transition for a panel(DIV) that slides in/out from the side. On pageload it should NOT "animate" but snap into the appropriate position. But on IE11 when the page loads the transition is "played" ONLY if there is a media query involved with that element matching the highest level of CSS specificity for the selector. The strange thing is that the media query is not even appropriate (should never be applied when the page is loaded in my test).

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

The following simple code duplicates my issue:

.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

HTML

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

因此，如果浏览器窗口的大小大于800像素，则不应应用媒体查询。然而，IE11似乎行为像应用媒体查询，然后回到实际触发转换的非媒体查询CSS。如果媒体查询内容选择器不匹配在媒体查询之外定义的CSS特异性的最高级别，则在页面加载时不会观察到转换（换句话说，如果我的媒体查询CSS选择器不太具体[例如<$ c $

So if size of the browser window is greater than 800 pixels the media query should not be applied. However, IE11 seems to act like it applies the media query and then reverts back to the non-media query CSS which actually triggers the transition. If the media query content selector does not match the highest level of CSS specificity as defined outside the media query, the transition will not be observed on page load (in other words if my media query CSS selector was less specific [say button + .standard], you would not see the transition "played").

任何想法如何阻止这种转换从

Any ideas how to prevent this transition from "playing" on page load using IE11 without having to write javascript?

推荐答案

使用IE11支持并记录了一个错误。此问题有一个解决方法。

Worked with MicroSoft support and logged a bug. There is a workaround for this issue.

而不是使用媒体查询

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

将查询更改为以下内容：

change the query to be the following:

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

这不应该是必需的（应该是隐含的），但在查询中放置最小宽度解析PLAYING页面加载的过渡。 MS应该修复它，但由于有一个解决方法，快速投票的可能性低。

This should not be required (it should be implied) but placing the min-width in the query resolves the "PLAYING" of transition on page load. MS should fix it but since there is a workaround, the likelihood of a quick turnout is low.

这篇关于当存在未应用的媒体查询时，IE11在页面加载时触发css转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！