correct height of reveal.js on mobile devices, fixes vertical overflow

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%;

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%;

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