@@ -12,6 +12,7 @@ html,
body {
width: 100%;
height: 100%;
+ height: calc( var(--vh, 1vh) * 100);
overflow: hidden; }
@@ -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;
@@ -15,6 +15,7 @@ html,
+ 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) {
- position: fixed;
- }
-}
@@ -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