Bug 153852 - <body> with overflow:hidden CSS is scrollable on iOS
Summary: <body> with overflow:hidden CSS is scrollable on iOS
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: iPhone / iPad iOS 10
: P2 Normal
Assignee: Nobody
URL: https://github.com/w3c/csswg-drafts/c...
Keywords: HasReduction
Depends on:
Blocks: 159753
  Show dependency treegraph
Reported: 2016-02-03 18:58 PST by Chris Rebert
Modified: 2017-10-17 06:36 PDT (History)
11 users (show)

See Also:

Testcase demonstrating the problem (8.37 KB, text/html)
2016-02-03 18:58 PST, Chris Rebert
no flags Details
GIF video demonstrating the bug (885.72 KB, image/gif)
2016-02-04 01:38 PST, Chris Rebert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Rebert 2016-02-03 18:58:32 PST
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).

Actual result:
The <body> underneath the yellow box scrolls downward.

Expected result:
The <body> should not scroll (just like on OS X Safari).
Comment 1 Chris Rebert 2016-02-04 01:38:35 PST
Created attachment 270644 [details]
GIF video demonstrating the bug
Comment 2 Simon Fraser (smfr) 2016-03-22 16:15:42 PDT
I would be concerned about changing behavior here, because it would cause content which has been reachable on earlier iOS versions to become unreachable.
Comment 3 Chris Rebert 2016-03-22 17:21:11 PDT
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?
Comment 4 Eric Allam 2016-07-12 04:42:00 PDT
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:

Comment 5 Chris Rebert 2016-12-04 21:54:42 PST
(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
> unreachable.

Based on https://github.com/w3c/csswg-drafts/issues/666#issuecomment-257889984 ,
should I assume your opinion has changed?
Comment 6 Simon Fraser (smfr) 2016-12-04 23:03:23 PST
After https://trac.webkit.org/changeset/194667 I am cautious about changing iOS <body> overflow:hidden behavior.
Comment 7 Marcelo Freitas 2017-08-14 13:39:23 PDT
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!
Comment 8 Sameera 2017-08-15 03:44:22 PDT
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?