From 123309222390608d6736cec8ce500ace501dfa99 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 13 Jun 2017 09:43:05 +0200 Subject: prevent mobile safari header from covering presentation content --- css/reveal.css | 4 ++++ css/reveal.scss | 10 ++++++++++ 2 files changed, 14 insertions(+) (limited to 'css') diff --git a/css/reveal.css b/css/reveal.css index 625fe6f..8acd961 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 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%; -- cgit v1.2.3