Browse Source

fix auto-animations in firefox

Hakim El Hattab 5 years ago
parent
commit
1de733d21b
1 changed files with 15 additions and 9 deletions
  1. 15 9
      js/reveal.js

+ 15 - 9
js/reveal.js

@@ -3839,15 +3839,18 @@
 	 */
 	function autoAnimate( fromSlide, toSlide ) {
 
-		// Lazily create the auto-animate stylesheet
-		if( !autoAnimateStyleSheet ) {
-			autoAnimateStyleSheet = document.createElement( 'style' );
-			document.head.appendChild( autoAnimateStyleSheet );
-		}
-		else {
-			autoAnimateStyleSheet.innerHTML = '';
+		// Remove any existing auto-animate sheet. Recycling led to
+		// animations sometimes not trigger in FF.
+		if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) {
+			autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet );
+			autoAnimateStyleSheet = null;
 		}
 
+		// Create a new auto-animate sheet
+		autoAnimateStyleSheet = document.createElement( 'style' );
+		autoAnimateStyleSheet.type = 'text/css';
+		document.head.appendChild( autoAnimateStyleSheet );
+
 		// Clean up after prior animations
 		removeEphemeralAutoAnimateAttributes();
 
@@ -3879,12 +3882,15 @@
 			css.push( '.reveal [data-auto-animate="running"] [data-auto-animate-unmatched] { transition: all '+ (slideOptions.duration*0.8) +'s ease '+ (slideOptions.duration*0.2) +'s; }' );
 		}
 
+		// Setting the whole chunk of CSS at once is the most
+		// efficient way to do this. Using sheet.insertRule
+		// is multiple factors slower.
 		autoAnimateStyleSheet.innerHTML = css.join( '' );
 
 		// Start the animation next cycle
-		requestAnimationFrame( function() {
+		setTimeout( function() {
 			toSlide.dataset.autoAnimate = 'running';
-		} );
+		}, 2 );
 
 	}