fix fullscreen issues; correct size in Safari, auto-focus presentation when entering fullscreen #3080

js/reveal.js

@@ -190,6 +190,9 @@ export default function( revealElement, options ) {
 		// Prevent the slides from being scrolled out of view
 		setupScrollPrevention();
 
+		// Adds bindings for fullscreen mode
+		setupFullscreen();
+
 		// Resets all vertical slides so that only the first is visible
 		resetVerticalSlides();
 
@@ -376,6 +379,19 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * After entering fullscreen we need to force a layout to
+	 * get our presentations to scale correctly. This behavior
+	 * is inconsistent across browsers but a force layout seems
+	 * to normalize it.
+	 */
+	function setupFullscreen() {
+
+		document.addEventListener( 'fullscreenchange', onFullscreenChange );
+		document.addEventListener( 'webkitfullscreenchange', onFullscreenChange );
+
+	}
+
 	/**
 	 * Registers a listener to postMessage events, this makes it
 	 * possible to call all reveal.js API methods from another
@@ -2433,6 +2449,26 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * Handler for the document level 'fullscreenchange' event.
+	 *
+	 * @param {object} [event]
+	 */
+	function onFullscreenChange( event ) {
+
+		let element = document.fullscreenElement || document.webkitFullscreenElement;
+		if( element === dom.wrapper ) {
+			event.stopImmediatePropagation();
+
+			// Timeout to avoid layout shift in Safari
+			setTimeout( () => {
+				Reveal.layout();
+				Reveal.focus.focus(); // focus.focus :'(
+			}, 1 );
+		}
+
+	}
+
 	/**
 	 * Handles clicks on links that are set to preview in the
 	 * iframe overlay.