Foundation-sites: Reveal Scroll - fails on mobile

[Ne-Ne]

I have just checked full screen reveal, on mobile.

Test Case:

iOS - 9.2
iPhone 6
Safari

This was the result:

You can scroll, when the intention is to lock the screen. I think iOS is not respect overflow hidden. Could this be included to support touch devices?

http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

[zurbrandon]

Oh man, that feels super dirty though. We'll take a look, but it feels like a really extreme option.

[zurbrandon]

@gerardkcohen @Owlbertz any thoughts on locking the scroll for iOS here?

[gerardkcohen]

Right, overflow:hidden on HTML will do it. A JS solution would be to trap
touch events to block "scrolling" of the viewport. Both have their issues,
with the CSS option my usual goto. Some gotchas for Firefox as well as
maintaining scroll position when overlay is dismissed. All as an FYI, I'm
sure you guys van work it out.

Let me know if you need anything else.

Gkc

On Thu, Dec 17, 2015 at 2:34 PM Brandon Arnold [email protected]
wrote:

@gerardkcohen https://github.com/gerardkcohen @Owlbertz
https://github.com/Owlbertz any thoughts on locking the scroll for iOS
here?

—
Reply to this email directly or view it on GitHub
https://github.com/zurb/foundation-sites/issues/7548#issuecomment-165602908
.

[zurbrandon]

@gerardkcohen looks like overflow: hidden doesn't work on iOS in this instance though, which is a huge bummer.

[gerardkcohen]

@zurbrandon I use overflow:hidden here at work for that exact same thing with no issue. Interesting...

[gerardkcohen]

Oh, positioned:fixed on the overlay too helps.

Gkc
On Thu, Dec 17, 2015 at 2:55 PM Brandon Arnold [email protected]
wrote:

@gerardkcohen https://github.com/gerardkcohen looks like overflow:
hidden doesn't work on iOS in this instance though, which is a huge bummer.

—
Reply to this email directly or view it on GitHub
https://github.com/zurb/foundation-sites/issues/7548#issuecomment-165607805
.

[zurbrandon]

Ah super odd, it's still scrolling. We may need to go another route.

[Ne-Ne]

I think that if you are using a full screen class it should lock the viewport... However this leads to issues with locking child elements and the overflow potential and so on.

Typically I thought chrome dev tools would help me out, however it does not inherit bugs or touch events.

@gerardkcohen, may I ask what device you are using?

[Ne-Ne]

@gerardkcohen It appears that the viewport meta tag affects the overflow property on the html & body. I don't think presuming all users will a surrounding class (for a overflow: hidden) the best idea.

What about a toggle function such as this: http://jsfiddle.net/3Ku26/

via - http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily#answer-4770179

[gerardkcohen]

To solve this problem we decided to use a more simple solution that did not require JS, as it is less brittle. The JS solution proved problematic for us when we needed to support a largely unknown set of uses. We use the following when the overlay is visible:

html.overlayVisible,
html.overlayVisible body {
    height: 100%;
    overflow: hidden;
    user-select: none;
}

Our viewport meta tag is pretty basic: <meta name="viewport" content="width=device-width, initial-scale=1">

This has been pretty solid for us across all platforms/ browsers for the last 2 years.

HTH

[Ne-Ne]

Has anyone got ideas @zurbrandon, I put @gerardkcohen's fix into place using toggle events to a jQuery .on testing the body class and adding . overlayVisible to the HTML else removing it.

Granted I have a solution, but its not working solution going forward.

[Ne-Ne]

Being fairly new to Github pull requests. I have done the above.

I know one commit is similar to the other, but I couldn't see a delete this commit (2e64954) on the web interface.

Any support would be great :+1:

[DaSchTour]

I could also reproduce this in Chrome Desktop Mobile Simulator even with not fullscreen modal. Although I can't really test it, because the reveal is somehow to far at the bottom.

[zurbchris]

Hey everybody, please checkout this branch and take a peak. It resolves several issues with Reveal positioning, though we still have yet to tackle the overflow scrolling on iOS devices reliably.

[r8n5n]

I have been having issues with this on iOS using the new branch. I ended up wrapping all the main content (everything apart from the reveal divs) in a container div and then setting this to a width/height of 1px when the reveal is open. As far as I can tell so far it behaves as expected.

Content structure:

  <div id="main-content">
    <!-- All non reveal content -->
 </div>

 <div class="reveal full" id="exampleModal1" data-reveal>
    ......
 </div>

And the CSS, using the _.is-reveal-open_ class that Foundation adds to _body_ when a reveal is open:

 .is-reveal-open {
   #main-content {
      position:absolute;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
   }
}
.reveal.full {
   -webkit-overflow-scrolling: touch;
}

(Tested briefly in iOS9 on iPhone5/6 and iPad3)

NB
I tried doing this on the body tag but it did not work on the iPhone 6.

[kball]

I believe this was fixed, at least for iOS, in #8744. This will be in the 6.2.2 release.

[jongar22]

@kball the issue is still very much present in iOS Safari.

[kball]

@jongar can you confirm by still present you mean you're seeing this on 6.3?

[jongar22]

@kball Yes. I also tested it with iPad Air and iPhone 6 Plus.

[joshbuchea]

@kball My organization is still seeing this issue with 6.3.

[kball]

OK, reopening this, 6.3.1 is under test now but let's make sure we tackle this for 6.3.2 and 6.4

[kball]

@jongar @joshbuchea Can either/both of you put some testcases up in codepen that reproduce? Template here: https://codepen.io/ncoden/pen/oYVpMe

[joshbuchea]

Steps to reproduce:

• Visit http://foundation.zurb.com/sites/docs/reveal.html#full-screen in iOS Safari
• Press "Click me for a full-screen modal" link
• Scroll

[gerardkcohen]

@kball @joshbuchea @jongar Pushed a quick fix #9763 that addresses the problem, but you should make sure it satisfies all appropriate use cases. HTH

[kball]

Fixed in #9763.

[DanielRuf]

It seems this produced a regression. The modal has a smaller height than the body but I can not scroll it unless I remove the `position: fixed´.