New issue
Advanced search Search tips

Issue 609198 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: May 2016
Cc:
bokan@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Compat



Sign in to add a comment

Position Absolute with Overflow Prevents Scrolling

Project Member Reported by jridgewell@google.com, May 4 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

Example URL:
http://output.jsbin.com/kuhotu

Steps to reproduce the problem:
1. Place mouse over "Flying Carpet" ui elements (the images)
2. Scroll in either direction

What is the expected behavior?
The page should scroll normally

What went wrong?
The page get stuck over the flying carpet, even though there is no scroll bar in the element.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? No Safari 9.1, Firefox 45.0.1

Chrome version: 50.0.2661.94  Channel: stable
OS Version: OS X 10.11.4
Flash Version: Shockwave Flash 21.0 r0

The page can be fixed by removing either the `position: absolute` style from the body element, or by removing both the `overflow-x` and `overflow-y` styles from the body.

Appears to be a similar issue to https://bugs.chromium.org/p/chromium/issues/detail?id=609161#, since both can be fixed by removing overflow CSS properties from body.

Comment 1 by karandeepb@chromium.org, May 4 2016

Components: Blink

Comment 2 by cbiesin...@chromium.org, May 6 2016

Components: -Blink Blink>Scroll

Comment 3 by bokan@chromium.org, May 9 2016

Cc: bokan@chromium.org
Status: WontFix (was: Unconfirmed)
This is working as intended I believe.

Setting overflow-x: hidden and overflow-y: auto on the body establishes a scrolling box for the <body> element and so that's what's scrolling rather than the "viewport". You can see this by scrolling and seeing that window.scrollY == 0.

Because the <div class="clip"> element is position: absolute, its containing block is not its parent in the DOM but its next positioned ancestor, which in this case is the viewport. But the viewport is unscrollable because the <body> element establishes the scrollign box. That's why scrolling over the "flying carpet" doesn't do anything.

The solution is to make <body> overflow: visible (or just leave overflow unspecified on <body>). You can leave overflow-x: hidden on the <html> element.
►

Sign in to add a comment