fix: avoid viewport height for fullscreen Reveal as it may be incorrect #10879

The CSS viewport is the larger possible view height and does not change with the visible area height. This is an intended behavior for optimization reason. See this article:

See: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
See: https://github.com/zurb/foundation-sites/issues/10879#issuecomment-414087274

Closes https://github.com/zurb/foundation-sites/issues/10879

diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
index 2126791e759e14cf1fb1af8672ef6b89107b6c1f..8099490bb5e0413c9f6c5f5530c42b4c01f573a3 100644 (file)
--- a/scss/components/_reveal.scss
+++ b/scss/components/_reveal.scss
@@ -113,13 +113,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 /// Creates a full-screen modal, which stretches the full width and height of the window.
 @mixin reveal-modal-fullscreen {
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
 
   width: 100%;
   max-width: none;
   height: 100%;
-  height: 100vh; // sass-lint:disable-line no-duplicate-properties
-  min-height: 100vh;
+  min-height: 100%;
   margin-left: 0;
 
   border: 0;