IE11 attiva la transizione css sul caricamento della pagina quando esiste una query multimediale non applicata

Question

Ho una situazione che si verifica solo su IE11. Chrome, Firefox, Safari (tablet e telefono) funzionano tutti come previsto. Ho creato una transizione per un pannello (DIV) che scorre dentro/fuori dal lato. Sul pageload NON deve "animare" ma scattare nella posizione appropriata. Ma su IE11, quando la pagina viene caricata, la transizione viene "riprodotta" SOLO se c'è una query multimediale coinvolta con quell'elemento che corrisponde al livello più alto di specificità CSS per il selettore. La cosa strana è che la query multimediale non è nemmeno appropriata (non dovrebbe mai essere applicata quando la pagina viene caricata nel mio test).

Il semplice codice seguente duplica il mio problema:

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> 

Quindi, se la dimensione della finestra del browser è più grande di 800 pixel la media query non dovrebbe essere applicato. Tuttavia, IE11 sembra agire come applica la query multimediale e quindi ritorna alla query non-media CSS che effettivamente attiva la transizione. Se il selettore del contenuto della query multimediale non corrisponde al livello più elevato di specificità CSS definito all'esterno della query multimediale, la transizione non verrà osservata al caricamento della pagina (in altre parole se il selettore CSS della query multimediale è meno specifico [ad esempio button + .standard], non vedrebbe la transizione "riprodotta").

Qualche idea su come impedire questa transizione da "riproduzione" a caricamento pagina usando IE11 senza dover scrivere javascript?

Answer 1

Non una soluzione gratuita completamente JavaScript, ma è possibile aggiungere una classe per l'intera pagina sul tag body:

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

e rimuovere quella classe dopo che la pagina è stata caricata

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

Answer 2

Lavorato con Supporto MicroSoft e ha registrato un bug. C'è una soluzione alternativa per questo problema.

Invece di utilizzare la media query

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

modificare la query per essere il seguente:

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

Questo non dovrebbe essere necessario (dovrebbe essere implicita), ma ponendo il min-width in la query risolve il "RIPRODUZIONE" della transizione al caricamento della pagina. MS dovrebbe aggiustarlo, ma poiché c'è una soluzione alternativa, la probabilità di una rapida affluenza è bassa.

Answer 3

La risposta dell'utente3546826 funziona quando la finestra è più grande del valore definito max-width. Quando la finestra è più piccola della transizione è ancora animata da IE/Edge. Ciò può essere evitato con la seguente soluzione (solo un esempio):

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