none
CSS Animationen nicht anzuhalten im neuen Browser Edge RRS feed

  • Frage

  • Hallo zusammen. Seit drei Tagen sitze ich über einem Problem, für das ich trotz langen Probierens keine Lösung gefunden habe - auch nicht durch Suche in Tante Google oder im MSDN.

    Für eine Webseite möchte ich CSS3 Animationen in einer Endlosschleife abspielen. Der Nutzer soll dabei die Möglichkeit haben, die Animation anzuhalten. Dieses ist bekanntermaßen unter CSS3 direkt nicht möglich, kann aber durch ein kurzes Javascript realisiert werden (wie hier mit einem Button-Element). Das funktioniert in allen modernen Browsern (Z.B. IE 11, FF 39,...).

    Mit dem Umstieg auf Win 10 und dem darin befindlichen Browser Edge funktioniert das Anhalten der Animation jedoch nicht mehr. Wohlgemerkt nur unter Edge nicht, denn wenn in Win 10 der IE oder FF aufgerufen wird, kann angehalten werden.

    Möglicherweise ist das ein Bug in Edge, aber bei Microsoft ist nichts dazu zu finden. Möglicherweise hat von Euch jemand nähere Informationen oder eine Lösung. Wäre echt dankbar dafür, denn die Aufwärtskompatibilität der Webseite ist für mich wichtig.

    Codebeispiel:

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <style type="text/css" media="all">
    #a01 {
    	;
    	left:50%; top:20%; width:40%; height:30%;
    	border: 3px solid black;
    	background-color:green;
    	animation-name: anim01;
    	animation-duration: 4s;
    	animation-fill-mode:none;
    	animation-iteration-count: infinite;
    	}
    @keyframes anim01 {
    	  0% { transform: translateX(0px) translateY(0px) }
    	100% { transform: translateX(-400px) translateY(0px)}	
    	}
    .anim{animation-play-state:running;}
    .stop{animation-play-state: paused;}
    </style>
    
    <TITLE>CSS Animation Test</TITLE>
    </HEAD>
    <BODY>
    	<button id="control">Start/Stop Animatimation</button><br />
    	<div class="anim" id="a01">&nbsp;</div>
    <script type="text/javascript">
    /* <![CDATA[ */ 
    (function toggleCSSAnim(){
    	el1=document.querySelectorAll(['.anim']);
    	document.querySelector('#control').addEventListener('click', function () {
    		var i=0;
    		var len = el1.length;
    		for (i = 0; i < len; i++) {
    			el1[i].classList.toggle('stop');
    		}
    	}, false);	
    })();
    /* ]]> */ 
    </script>
    </BODY>
    </HTML>


    • Bearbeitet Karl B Mittwoch, 5. August 2015 15:40
    Mittwoch, 5. August 2015 15:39

Antworten

  • Danke für die Info.

    Habe inzwischen solange herumgebastelt, bis ich zufällig auf einen Workaround gestoßen bin.

    Dabei muss man jedes animierte Element, das gestoppt werden soll, per Javascript unsichtbar machen und danach wieder sichtbar. Allerdings reicht es nicht, im Code beide Zeilen unmittelbar hintereinander zu schreiben, da dabei noch kein Repaint ausgelöst wird. Also erst die Visibility auf hidden stellen, dann per setTimeout kurz warten und anschließend die Sichtbarkeit wieder herstellen. Das funktioniert soweit einwandfrei, es bleibt aber ein kurzes Flackern. Hoffen wir also auf eine baldige Unterstützund des Stopps.

    Hier noch ein Codebeispiel (der wichtige Teil ist das Javascript):

    <!DOCTYPE HTML> <HTML> <HEAD> <style type="text/css" media="all"> #a01 { left:50%; top:20%; width:40%; height:30%; border: 3px solid black; background-color:green; animation-name: anim01; animation-duration: 4s; animation-fill-mode:none; animation-iteration-count: infinite; } @keyframes anim01 { 0% { transform: translateX(0px) translateY(0px);} 100% { transform: translateX(-400px) translateY(0px);} } .anim{color:blue;} .stop{animation-play-state: paused;} </style> <TITLE>CSS Animation Test</TITLE> </HEAD> <BODY> <button id="control">Start/Stop Animatimation</button><br /> <div class="anim" id="a01">&nbsp;</div> <script type="text/javascript"> /* <![CDATA[ */ (function toggleCSSAnim(){ el1=document.querySelectorAll(['.anim']); document.querySelector('#control').addEventListener('click', function () { var i=0; var len = el1.length; for (i = 0; i < len; i++) { el1[i].classList.toggle('stop'); } if (navigator.userAgent.match('Edge')) { for (i = 0; i < len; i++) { el1[i].style.visibility="hidden"; } setTimeout( function (a, l) { var i=0; for (i = 0; i < l; i++) { a[i].style.visibility="visible"; } }, 1, el1, len); } }, false); })(); /* ]]> */ </script> </BODY> </HTML>







    • Bearbeitet Karl B Mittwoch, 12. August 2015 20:24 position:absolute; wird im Codeblock nicht akzeptiert
    • Als Antwort markiert Kai SchätzlMVP, Editor Freitag, 14. August 2015 14:39
    Mittwoch, 12. August 2015 17:34

Alle Antworten

  • Stelle bitte eine URL mit Reproduktionsmöglichkeit zur Verfügung.

    IEFAQ: http://iefaq.info

    Mittwoch, 5. August 2015 16:00
    Beantworter
  • Testseite mit dem o.a. Code ist aufrufbar unter

    http://weihnachtsbaumverleih.com/AnimTest.html

    Wie gesagt, die Animation kann unter IE 11 oder FF 39 per Klick auf den Button gestoppt werden, unter Edge nicht.

    Mittwoch, 5. August 2015 19:37
  • Danke, hab das mal weitergeleitet.

    OK, laut Auskunft vom IE Team ist das ein bekannter Fehler, der leider auf absehbare Zeit nicht behoben werden kann. Edge benutzt hier die Hardwarebeschleunigung des Betriebssystems (Windows 10) und das unterstützt z.Z. schlicht nicht die Möglichkeit, das anzuhalten. Im IE11 funktioniert das "zufällig", weil dort anscheinend ein Check vergessen wurde, so daß die Hardwarebeschleunigung nicht benutzt wird. Das Verhalten wird also erst korrigiert werden, wenn Windows 10 den Stop unterstützt ...

    IEFAQ: http://iefaq.info


    Montag, 10. August 2015 12:38
    Beantworter
  • Danke für die Info.

    Habe inzwischen solange herumgebastelt, bis ich zufällig auf einen Workaround gestoßen bin.

    Dabei muss man jedes animierte Element, das gestoppt werden soll, per Javascript unsichtbar machen und danach wieder sichtbar. Allerdings reicht es nicht, im Code beide Zeilen unmittelbar hintereinander zu schreiben, da dabei noch kein Repaint ausgelöst wird. Also erst die Visibility auf hidden stellen, dann per setTimeout kurz warten und anschließend die Sichtbarkeit wieder herstellen. Das funktioniert soweit einwandfrei, es bleibt aber ein kurzes Flackern. Hoffen wir also auf eine baldige Unterstützund des Stopps.

    Hier noch ein Codebeispiel (der wichtige Teil ist das Javascript):

    <!DOCTYPE HTML> <HTML> <HEAD> <style type="text/css" media="all"> #a01 { left:50%; top:20%; width:40%; height:30%; border: 3px solid black; background-color:green; animation-name: anim01; animation-duration: 4s; animation-fill-mode:none; animation-iteration-count: infinite; } @keyframes anim01 { 0% { transform: translateX(0px) translateY(0px);} 100% { transform: translateX(-400px) translateY(0px);} } .anim{color:blue;} .stop{animation-play-state: paused;} </style> <TITLE>CSS Animation Test</TITLE> </HEAD> <BODY> <button id="control">Start/Stop Animatimation</button><br /> <div class="anim" id="a01">&nbsp;</div> <script type="text/javascript"> /* <![CDATA[ */ (function toggleCSSAnim(){ el1=document.querySelectorAll(['.anim']); document.querySelector('#control').addEventListener('click', function () { var i=0; var len = el1.length; for (i = 0; i < len; i++) { el1[i].classList.toggle('stop'); } if (navigator.userAgent.match('Edge')) { for (i = 0; i < len; i++) { el1[i].style.visibility="hidden"; } setTimeout( function (a, l) { var i=0; for (i = 0; i < l; i++) { a[i].style.visibility="visible"; } }, 1, el1, len); } }, false); })(); /* ]]> */ </script> </BODY> </HTML>







    • Bearbeitet Karl B Mittwoch, 12. August 2015 20:24 position:absolute; wird im Codeblock nicht akzeptiert
    • Als Antwort markiert Kai SchätzlMVP, Editor Freitag, 14. August 2015 14:39
    Mittwoch, 12. August 2015 17:34
  • Hallo Karl,

    wenn du sagst (ich konnte es nachvollziehen), dass das Problem nur unter dem MS Edge Browser eintritt, dann solltest du dieses Flackern doch bitte nicht auch bei den anderen Browsern hervorrufen.

    Du könntest doch beim starten des scriptes auslesen, ob es der Edge-Browser ist und wenn ja einen variable setzen.

    Wenn die Variable gesetzt ist, dann diese notfall-Technik anwenden, ansonsten wie normal vorgehen.


    © 2015 Thomas Roskop
    Germany //  Deutschland

    Mittwoch, 12. August 2015 17:41
  • Hi Thomas,

    diese Browserabfrage ist bereits im Code enthalten, genau aus dem von Dir genannten Grund:

        if (navigator.userAgent.match('Edge')) {

    Die Abfrage kommt aber erst nachdem die CSS-Klasse getoggelt wird.

    Das Beispiel kann unter

    http://weihnachtsbaumverleih.com/AnimTest.html

    aufgerufen.

    Gruß

    Karl

    Mittwoch, 12. August 2015 18:24
  • Hallo,

    das mit der Anfrage habe ich wohl übersehen.

    Aber trotzdem läuft die Animation in meinem Edge-Browser. Also, sie läuft und kann nicht mehr gestoppt werden.


    © 2015 Thomas Roskop
    Germany //  Deutschland

    Mittwoch, 12. August 2015 18:27
  • Guter Hinweis. Ich habe den obenstehenden Code jetzt x-mal versucht einzufügen. Immer fehlt etwas. Zuletzt fehlt im CSS-Block nach

    #a01 { 

    noch die Anweisung

       POSITION:ABSOLUTE;   

    (selbst im normalen Text wird das kleingeschrieben nicht akzepziert!)

    egal wie oft ich das jetzt versucht habe, auch durch rein manuelles Eintragen, nach dem Senden bleibt von POSITION:ABSOLUTE; nur das Semikolon übrig. Der Code ist jetzt lauffähig (POSITION:ABSOLUTE; nicht vergessen, sonst bleibt das Kästchen zu dünn und wandert aus dem Bild)

    Der Link in meinem vorangegengenen Post enthält den gleichen Code. Hast Du das ausprobiert? bei mir läuft es unter allen drei Browsern Edge, IE11 und FF39. Gestoppt werden kann allerdings nur, wenn Javascript aktiviert ist.


    • Bearbeitet Karl B Mittwoch, 12. August 2015 20:27 POSITION:ABSOLUTE;
    Mittwoch, 12. August 2015 20:23