diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2019-01-22 09:45:33 +0100 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2019-01-22 09:45:33 +0100 |
| commit | 5002304fb119859fe0d115883acceb094bc41be0 (patch) | |
| tree | 33c3d62636730efb7cf97801d59f1b88fefb9baa | |
| parent | c36caef5e7f2a448df8503ff8eb37defea297152 (diff) | |
| download | perl-software-in-gnu-guix-5002304fb119859fe0d115883acceb094bc41be0.tar perl-software-in-gnu-guix-5002304fb119859fe0d115883acceb094bc41be0.tar.gz | |
correct height of reveal.js on mobile devices, fixes vertical overflow
| -rw-r--r-- | css/reveal.css | 5 | ||||
| -rw-r--r-- | css/reveal.scss | 11 | ||||
| -rw-r--r-- | js/reveal.js | 10 |
3 files changed, 12 insertions, 14 deletions
diff --git a/css/reveal.css b/css/reveal.css index 5de7b4c..c685926 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -12,6 +12,7 @@ html, body { width: 100%; height: 100%; + height: calc( var(--vh, 1vh) * 100); overflow: hidden; } body { @@ -463,10 +464,6 @@ 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 7e75dde..7bec964 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -15,6 +15,7 @@ html, body { width: 100%; height: 100%; + height: calc( var(--vh, 1vh) * 100 ); overflow: hidden; } @@ -559,16 +560,6 @@ $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 afd678b..88ce029 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2065,6 +2065,16 @@ if( !config.disableLayout ) { + // On some mobile devices '100vh' is taller than the visible + // viewport which leads to part of the presentation being + // cut off. To work around this we define our own '--vh' custom + // property where 100x adds up to the correct height. + // + // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + if( isMobileDevice ) { + document.documentElement.style.setProperty( '--vh', ( window.innerHeight * 0.01 ) + 'px' ); + } + var size = getComputedSlideSize(); // Layout the contents of the slides |