]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: cabb4fb)
Fix scrolling issue with reveal on ios 8744/head
authorKevin Ball <kmball11@gmail.com>
Thu, 5 May 2016 18:31:23 +0000 (11:31 -0700)
committerKevin Ball <kmball11@gmail.com>
Thu, 5 May 2016 18:31:23 +0000 (11:31 -0700)
scss/components/_reveal.scss patch | blob | blame | history
test/visual/reveal/full-reveal.html patch | blob | blame | history

diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
index 1c0efec6a75e6ac59e95ea1f8f2fa32a5ea3572d..cac8b94497340c45f236fac4cf0b8761367c6548 100644 (file)
--- a/scss/components/_reveal.scss
+++ b/scss/components/_reveal.scss
@@ -113,6 +113,13 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   body.is-reveal-open {
     overflow: hidden;
   }
+  // html gets this class only in iOS
+  html.is-reveal-open,
+  html.is-reveal-open body {
+    height: 100%;
+    overflow: hidden;
+    user-select: none;
+  }
 
   // Overlay
   .reveal-overlay {
diff --git a/test/visual/reveal/full-reveal.html b/test/visual/reveal/full-reveal.html
index 3c6271ca45ed8465bdfa0f8a1bb94ed1d0a3baa7..b7cced5d07c145ccd0139af54515908c2d8795b4 100644 (file)
--- a/test/visual/reveal/full-reveal.html
+++ b/test/visual/reveal/full-reveal.html
@@ -9,6 +9,30 @@
 <body>
 
   <a href="#" data-toggle="contact-modal">Open testcase from http://foundation.zurb.com/forum/posts/38459-f6-reveal-modal-suggestions</a>
+  <p>When the reveal is open, it should scroll but body no</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
+  <p>Scroll</p>
   <div class="full reveal" id="contact-modal" data-reveal>
     <p>OH I'M SO FUUUUL</p>
     <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
Mirror of https://github.com/foundation/foundation-sites.git