Browse Source

prevent mobile safari header from covering presentation content

Hakim El Hattab 7 years ago
parent
commit
1233092223
3 changed files with 21 additions and 0 deletions
  1. 4 0
      css/reveal.css
  2. 10 0
      css/reveal.scss
  3. 7 0
      js/reveal.js

+ 4 - 0
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%;

+ 10 - 0
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%;

+ 7 - 0
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 );