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

Question

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:

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>

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?

Answer 1

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

Instead of using the media query

@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)

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.

Answer 2

Not a completely javascript free solution but you can add a class to the entire page on the body tag:

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

and remove that class after the page has loaded

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

Answer 3

The answer of user3546826 works when the window is larger than the defined max-width. When the window is smaller than the transition is still animated by IE / Edge. This can be avoided with the following workaround (just an example):

#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;
  }
}