prevent mobile safari header from covering presentation content

1 files changed, 10 insertions, 0 deletions

diff --git a/css/reveal.scss b/css/reveal.scss
index 4a953fd..8f5ac5b 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -569,6 +569,16 @@ $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%;