diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-06-13 09:43:05 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-06-13 09:43:05 +0200 |
| commit | 123309222390608d6736cec8ce500ace501dfa99 (patch) | |
| tree | c8b0b659502b654ee5c69f2ae134e8ce5c8795e7 | |
| parent | 9342d19b5adcd3eea1f2f16ba74ec2f83928efc5 (diff) | |
| download | fosdem-2018-presentation-123309222390608d6736cec8ce500ace501dfa99.tar fosdem-2018-presentation-123309222390608d6736cec8ce500ace501dfa99.tar.gz | |
prevent mobile safari header from covering presentation content
| -rw-r--r-- | css/reveal.css | 4 | ||||
| -rw-r--r-- | css/reveal.scss | 10 | ||||
| -rw-r--r-- | js/reveal.js | 7 |
3 files changed, 21 insertions, 0 deletions
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 ); |