Created attachment 270621 [details]
Testcase demonstrating the problem
Applying `overflow: hidden` to the `<body>` should make it non-scrollable.
This works correctly on OS X Safari, but doesn't work correctly on iOS Safari.
Original Bootstrap issue:
Lost to the sands of time, but https://github.com/twbs/bootstrap/issues/14839 is relevant & popular.
See also http://getbootstrap.com/getting-started/#overflow-and-scrolling
Steps to reproduce:
1. Open the attached testcase in iOS Safari.
2. Tap the "Launch demo modal" button.
3. A yellow box with text appears.
4. Scroll the yellow box to its bottom, where there are "Close" and "Save changes" buttons, and lift your finger off the screen to ensure that the scroll gesture ends.
5. Attempt to scroll the yellow box further downward (which is to say, apply a "fling upward" gesture to the yellow box).
The <body> underneath the yellow box scrolls downward.
The <body> should not scroll (just like on OS X Safari).
Created attachment 270644 [details]
GIF video demonstrating the bug
I would be concerned about changing behavior here, because it would cause content which has been reachable on earlier iOS versions to become unreachable.
Android Chrome already made the behavior change and blazed the trail here:
They tracked broken sites in https://bugs.chromium.org/p/chromium/issues/detail?id=444581 (and its dupes).
They communicated with several sites and got some to fix their CSS.
In comments 24-25 & 28, they acknowledge some breakage, but don't think there's enough of it to justify switching back:
I couldn't find any signs of any subsequent revert.
If WebKit were to disagree with Chrome's analysis and fear too much breakage,
what would be the path forward?
A new "yes, I really truly want 'hidden' here!" value for the CSS 'overflow' property?
This bug has recently become a problem for a project I'm working on where we are trying to implement a chat interface, with a header element that acts like a navigation bar, and a footer element that includes a text field, with a chat container which includes the chat messages that should be able to scroll. I know this isn't a reduced test case but we have put together a stripped down version of the chat on JSBin which demonstrates this problem too:
(In reply to comment #2)
> I would be concerned about changing behavior here, because it would cause
> content which has been reachable on earlier iOS versions to become
Based on https://github.com/w3c/csswg-drafts/issues/666#issuecomment-257889984 ,
should I assume your opinion has changed?
After https://trac.webkit.org/changeset/194667 I am cautious about changing iOS <body> overflow:hidden behavior.
Hi guys, do you have any new about this issue? I am facing similar behavior and I would like to know if is there any solution or workaround!
I'm having same issue. I have find solution with adding class to body with the style position:fixed. But doing that page scroll to the top.
Any other solutions?