prevent iframes from offsetting presentation

3 files changed, 25 insertions, 0 deletions

diff --git a/css/reveal.css b/css/reveal.css
index a02c0fb..43d774b 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -275,6 +275,7 @@ body {
   position: relative;
   width: 100%;
   height: 100%;
+  overflow: hidden;
   -ms-touch-action: none;
       touch-action: none; }
 
diff --git a/css/reveal.scss b/css/reveal.scss
index 7e5b71d..23cfefd 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -352,6 +352,7 @@ body {
 	position: relative;
 	width: 100%;
 	height: 100%;
+	overflow: hidden;
 	touch-action: none;
 }
 
diff --git a/js/reveal.js b/js/reveal.js
index dbe3679..fdf3204 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -384,6 +384,9 @@
 		// Listen to messages posted to this window
 		setupPostMessage();
 
+		// Prevent iframes from scrolling the slides out of view
+		setupIframeScrollPrevention();
+
 		// Resets all vertical slides so that only the first is visible
 		resetVerticalSlides();
 
@@ -568,6 +571,26 @@
 	}
 
 	/**
+	 * This is an unfortunate necessity. Iframes can trigger the
+	 * parent window to scroll, for example by focusing an input.
+	 * This scrolling can not be prevented by hiding overflow in
+	 * CSS so we have to resort to repeatedly checking if the
+	 * browser has decided to offset our slides :(
+	 */
+	function setupIframeScrollPrevention() {
+
+		if( dom.slides.querySelector( 'iframe' ) ) {
+			setInterval( function() {
+				if( dom.wrapper.scrollTop !== 0 || dom.wrapper.scrollLeft !== 0 ) {
+					dom.wrapper.scrollTop = 0;
+					dom.wrapper.scrollLeft = 0;
+				}
+			}, 500 );
+		}
+
+	}
+
+	/**
 	 * Creates an HTML element and returns a reference to it.
 	 * If the element already exists the existing instance will
 	 * be returned.