Encountering a unique situation with IE11 where a panel (DIV) transition is only activated on pageload if a media query matched the highest CSS specificity for the element. The issue does not occur on Chrome, Firefox, or Safari on tablets and phones. The desired behavior is for the panel to snap into position without animation on pageload, but IE11 seems to be playing the transition unnecessarily.
Here is a simple code snippet that replicates the problem:
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>
The challenge is preventing the unnecessary transition from triggering on pageload in IE11 without resorting to JavaScript solutions. Any suggestions?