From 123309222390608d6736cec8ce500ace501dfa99 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Tue, 13 Jun 2017 09:43:05 +0200
Subject: [PATCH] prevent mobile safari header from covering presentation
content
---
css/reveal.css | 4 ++++
css/reveal.scss | 10 ++++++++++
js/reveal.js | 7 +++++++
3 files changed, 21 insertions(+)
diff --git a/css/reveal.css b/css/reveal.css
index 625fe6f7..8acd961a 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -474,6 +474,10 @@ 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 4a953fd0..8f5ac5b4 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%;
diff --git a/js/reveal.js b/js/reveal.js
index 186a9990..17d1323e 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -530,6 +530,13 @@
dom.wrapper.classList.remove( 'no-hover' );
}
+ if( /iphone/gi.test( UA ) ) {
+ dom.wrapper.classList.add( 'ua-iphone' );
+ }
+ else {
+ dom.wrapper.classList.remove( 'ua-iphone' );
+ }
+
// Background element
dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );
--
GitLab