5

Nel provare le transizioni CSS ho creato una piccola demo di scorrimento che passa dallostile css da un numero negativo a 0 e si riavvia quando l'evento transitionend si attiva per ottenere un effetto di scorrimento infinito. Ecco un Fiddle con la mia demo - http://jsfiddle.net/XhFdv/Ripristino delle transizioni css in Internet Explorer 10

Funziona con FF, Chrome, Safari (vittoria) e Opera. In IE 10 (testato su Win 7 e Win 8) l'evento si attiva, ma il tentativo di impostare la proprietà giusta sul numero negativo da cui inizia non sembra funzionare - spesso rimane 0 dopo essere stato impostato (ma non sempre).

Per rendere le cose più divertenti, aggiungere console.log() o alert() è spesso sufficiente per farlo funzionare come previsto. Questo mi fa pensare che ci sia qualcosa di incompleto nel livello dell'interfaccia utente. Ho cercato di racchiudere più impostazioni di stile in un setTimeout(..., 0) in modo che il rendering potesse recuperare, ma non sembrava essere di aiuto.

Si tratta di un bug in IE 10 o c'è qualcosa che mi manca nello script demo?

+0

Ho visto questo tipo di insetti prima e sono sicuramente un dolore. Di solito un timeout funziona ma non credo in questo caso. Avrò il tempo di giocherellare domani, quindi tornerò da te su questo; molto particolare! –

+0

ho aumentato il ritardo di setTimeout fino a 10-20 ms e funziona solo per me. –

+2

Ho archiviato un bug con Microsoft qualche mese fa. Credo che siano stati in grado di riprodurre il problema e averlo come bug candidato da correggere in una delle prossime versioni principali. Sfortunatamente non ho trasformato in IE 11. – mld

risposta

1

alert() funziona perché blocca l'esecuzione dello script. Come misura secondaria: qualcosa che fa scattare un ridipingere o riflusso sarebbe la prossima cosa migliore:

  • Toggle visibility:hidden/visible tramite una classe attributo cambiare
  • Toggle visibility:hidden/visible tramite uno stile di attribuire cambiare
  • Aggiunta di un foglio di stile tramite il CSSOM
  • Nascondere un elemento tramite display:none
  • Calcolo offsetWidth o offsetHeight
  • Tr iggering un evento scroll
  • Comando di un :hover pseudo-classe sul pari livello dell'elemento in questione

Riferimenti

Problemi correlati