From a4852c7cb2a5792d0ead3ee59435371225755dea Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 3 Feb 2015 11:56:54 +0100 Subject: [PATCH] prevent iframes from offsetting presentation --- css/reveal.css | 1 + css/reveal.scss | 1 + js/reveal.js | 23 +++++++++++++++++++++++ 3 files changed, 25 insertions(+) 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(); @@ -567,6 +570,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