From 123309222390608d6736cec8ce500ace501dfa99 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 13 Jun 2017 09:43:05 +0200 Subject: [PATCH] prevent mobile safari header from covering presentation content --- css/reveal.css | 4 ++++ css/reveal.scss | 10 ++++++++++ js/reveal.js | 7 +++++++ 3 files changed, 21 insertions(+) diff --git a/css/reveal.css b/css/reveal.css index 625fe6f..8acd961 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -474,6 +474,10 @@ body { -ms-touch-action: none; touch-action: none; } +@media only screen and (orientation: landscape) { + .reveal.ua-iphone { + position: fixed; } } + .reveal .slides { position: absolute; width: 100%; diff --git a/css/reveal.scss b/css/reveal.scss index 4a953fd..8f5ac5b 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -569,6 +569,16 @@ $controlsArrowAngleActive: 36deg; touch-action: none; } +// Mobile Safari sometimes overlays a header at the top +// of the page when in landscape mode. Using fixed +// positioning ensures that reveal.js reduces its height +// when this header is visible. +@media only screen and (orientation : landscape) { + .reveal.ua-iphone { + position: fixed; + } +} + .reveal .slides { position: absolute; width: 100%; diff --git a/js/reveal.js b/js/reveal.js index 186a999..17d1323 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -530,6 +530,13 @@ dom.wrapper.classList.remove( 'no-hover' ); } + if( /iphone/gi.test( UA ) ) { + dom.wrapper.classList.add( 'ua-iphone' ); + } + else { + dom.wrapper.classList.remove( 'ua-iphone' ); + } + // Background element dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );