IE11 löst CSS-Übergang beim Laden der Seite, wenn nicht angewandte Medienabfrage existiert

Question

Ich habe eine Situation, die nur auf IE11 auftritt. Chrome, Firefox, Safari (Tablet und Telefon) funktionieren wie erwartet. Ich habe einen Übergang für ein Panel (DIV) erstellt, das von der Seite ein- und ausgleitet. Beim Laden von Seiten sollte es NICHT "animiert" werden, sondern an der entsprechenden Stelle einrasten. Aber in IE11, wenn die Seite geladen wird, wird der Übergang NUR dann "abgespielt", wenn eine Medienabfrage mit diesem Element verbunden ist, die die höchste CSS Spezifität für den Selektor aufweist. Die seltsame Sache ist, dass die Medienabfrage nicht einmal angemessen ist (sollte nie angewendet werden, wenn die Seite in meinem Test geladen wird).

Die folgende einfache Code dupliziert mein 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">&nbsp;</div> 

Also, wenn Größe des Browserfensters größer als 800 Pixel ist die Medienabfrage nicht sein sollte angewendet. IE11 scheint jedoch so zu agieren, als ob er die Medienabfrage anwendet, und kehrt dann zu dem Nicht-Medien-Abfrage-CSS zurück, das den Übergang tatsächlich auslöst. Wenn der Content-Selektor für die Medienabfrage nicht der höchsten CSS-Spezifität entspricht, die außerhalb der Medienabfrage definiert ist, wird der Übergang beim Laden der Seite nicht beobachtet (anders ausgedrückt, wenn mein CSS-Selektor für die Medienabfrage weniger spezifisch ist [zB button + .standard] würde den Übergang nicht "gespielt" sehen.

Haben Sie Ideen, wie Sie diesen Übergang vom "Spielen" beim Laden der Seite mithilfe von IE11 verhindern können, ohne Javascript schreiben zu müssen?

Answer 1

kein völlig Javascript freie Lösung, aber Sie können eine Klasse auf die gesamte Seite auf dem Body-Tag hinzufügen:

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

und entfernen Sie diese Klasse, nachdem die Seite mit

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

Answer 2

Arbeitete geladen ist MicroSoft unterstützt und protokolliert einen Fehler. Es gibt eine Problemumgehung für dieses Problem.

Statt die Medienabfrage der Verwendung

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

Änderung der Abfrage werden die folgenden:

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

Dies sollte nicht erforderlich sein (es impliziert werden sollte), sondern indem die min-width in Die Abfrage löst das "PLAYING" des Übergangs beim Laden der Seite auf. MS sollte es beheben, aber da es eine Problemumgehung gibt, ist die Wahrscheinlichkeit einer schnellen Teilnahme gering.

Answer 3

Die Antwort von user3546826 funktioniert, wenn das Fenster größer als die definierte max-width ist. Wenn das Fenster kleiner ist als der Übergang wird immer noch von IE/Edge animiert. Dies kann mit der folgenden Problemumgehung (nur ein Beispiel) vermieden werden:

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