Targetting anchors inside an `overflow: hidden` element may cut off content if a child has negative positioning
Reported by
johanrin...@gmail.com,
Dec 3 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36 Steps to reproduce the problem: 1. Give an element the style `position: relative; overflow: hidden` 2. Give a child of said element the style `position: absolute; left: 0; top: 0; right: 0; bottom: -60px` 3. Find another child inside of the element whose upper edge is more than 60px from the start of the element. Turn it into an anchor (by giving it an ID) 4. Focus said anchor What is the expected behavior? The page is scrolled so that the focused anchor is at the start of the browser window. The user can scroll back up to show content above the anchor. What went wrong? The containing element is "scrolled" so that the focused anchor is at the start of the element. Any content above the focused anchor disappears, and cannot be seen again without focusing another anchor or reloading. Note that a maximum of 60px of content can disappear - this number can be changed by changing the `bottom: -60px` of the child element. Did this work before? N/A Does this work in other browsers? No The behavior can be found in Firefox 57.0 too - an issue has not yet been raised with Mozilla for this. Chrome version: 62.0.3202.94 Channel: stable OS Version: 10.0 Flash Version:
,
Dec 3 2017
A bug has now been raised with Mozilla, since the issue also exists in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1422601
,
Dec 3 2017
A bit more testing indicates that the issue is rather simple: linking to an anchor can cause an `overflow: hidden` element to be scrolled, which is impossible to undo as a user.
,
Dec 4 2017
Able to reproduce this issue on Mac 10.12.6, Win-10 and Ubuntu 14.04 using chrome reported version #62.0.3202.94 and latest canary #64.0.3282.7. This is a non-regression issue as it is observed from M50 old builds. Hence, marking it as untriaged to get more inputs from dev team. Thanks...!!
,
Dec 5 2017
Interesting. Scrolling folks, is this expected behavior?
,
Dec 6 2017
A short overview of the issue (since the issue description is incorrect, I hadn't figured out the root of the issue at that point): Elements with `overflow: hidden` are scrollable, but no scrollbar is shown to the user. Certain actions (e.g. linking to an anchor inside the element) can make it scroll anyway. This is impossible to undo as a user. The elements `.scrollTop` is correctly set (contrary to the text in the reduced test case - please ignore that), and the issue can be resolved through JS by forcing `.scrollTop` to 0. The issue exists in every major browser. Firefox has some related issues on it, some 12 years old (!) - they might be worth looking at: - https://bugzilla.mozilla.org/show_bug.cgi?id=325942 - https://bugzilla.mozilla.org/show_bug.cgi?id=226277 Since the issue exists in every major browser, this might be a thing that needs to be handled in the CSS spec. Unfortunately that is a bit above my head, so I'll let whoever reads this handle that :) Of note is the following comment on Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=226277#c3
,
Dec 7 2017
Over to the layout team since this is about relatively position items.
,
Dec 13 2017
As dbaron points out in the mozilla bug report this is intentional and per spec. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by johanrin...@gmail.com
, Dec 3 2017