aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/reveal.css5
-rw-r--r--css/reveal.scss11
-rw-r--r--js/reveal.js10
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