From 5002304fb119859fe0d115883acceb094bc41be0 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Tue, 22 Jan 2019 09:45:33 +0100
Subject: correct height of reveal.js on mobile devices, fixes vertical
 overflow

---
 css/reveal.css  |  5 +----
 css/reveal.scss | 11 +----------
 2 files changed, 2 insertions(+), 14 deletions(-)

(limited to 'css')

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%;
-- 
cgit v1.2.3