5

Beim Ausprobieren von CSS-Übergängen habe ich eine kleine Scroll-Demo erstellt, die den right css-Stil von einer negativen Zahl auf 0 umschaltet und dann neu startet, wenn der transitionend -Ereignis ausgelöst wird. Hier ist eine Fiddle mit meiner Demo - http://jsfiddle.net/XhFdv/Zurücksetzen von CSS-Übergängen in Internet Explorer 10

Dies funktioniert in den neuesten FF, Chrome, Safari (Win) und Opera. In IE 10 (getestet sowohl mit Win 7 als auch mit Win 8) wird das Ereignis ausgelöst, aber die richtige Eigenschaft wieder auf die negative Zahl zu setzen scheint nicht zu funktionieren - sie bleibt oft 0 nachdem sie gesetzt wurde (aber nicht immer).

Um die Dinge unterhaltsamer zu machen, reicht es oft aus, console.log() oder alert() hinzuzufügen, damit es wie erwartet ausgeführt wird. Das lässt mich denken, dass etwas Unfertiges in der UI-Ebene ist. Ich habe versucht, mehr von den Stileinstellungen in eine setTimeout(..., 0) zu wickeln, so Rendering konnte aufholen, aber das schien nicht zu helfen.

Ist das ein Fehler in IE 10, oder fehlt mir etwas im Demoskript?

+0

Ich habe diese Art von Fehler gesehen und sie sind definitiv ein Schmerz. Normalerweise funktioniert ein Timeout aber ich denke nicht in diesem Fall. Ich werde morgen Zeit haben, um herumzutüfteln, also werde ich darauf zurückkommen; sehr eigenartig! –

+0

Ich habe die SetTimeout-Verzögerung um 10-20 ms erhöht und es funktioniert nur für mich. –

+2

Ich habe vor ein paar Monaten einen Fehler bei Microsoft eingereicht. Ich glaube, sie waren in der Lage, das Problem zu reproduzieren und es als einen Kandidaten-Bug in einer der nächsten Hauptversionen zu beheben. Ich habe leider nicht in IE 11 gemacht. – mld

Antwort

1

alert() funktioniert, weil es die Skriptausführung blockiert. Als sekundäre Maßnahme: etwas, das ein Repaint oder Reflow löst würde die nächste beste Sache sein:

  • Toggle visibility:hidden/visible über ein Klassenattribut visibility:hidden/visible über einen Stil
  • Toggle ändert Attribut ändern
  • ein Stylesheet über das Hinzufügen CSSOM
  • Hiding ein Element über display:none
  • Berechnung offsetWidth oder offsetHeight
  • Tr iggering ein scroll Ereignis
  • Auslösen eine :hover pseudo-Klasse auf dem Geschwister des Elements in Frage

Referenzen

Verwandte Themen