Overflow: hidden does not prevent page length increase with absolutely positioned div outside page width on mobile
Reported by
mcome...@mozilla.com,
Oct 20 2017
|
|||||||
Issue descriptionSteps to reproduce the problem: In the attached test case, using a mobile Chrome, mobile WebView, or desktop Chrome in responsive design mode: 1. Click "Pseudo-Element" button What is the expected behavior? Page length does not increase and does not have extra scrollable space What went wrong? Page length increases and has extra scrollable space Did this work before? N/A Does this work in other browsers? Yes Chrome version: 51.0.2704.81 (Official Build) (32-bit) Channel: n/a OS Version: 6.0.0 Flash Version: This works differently in desktop Firefox responsive design mode and mobile Firefox: I'm unsure if Chrome or Firefox has the correct behavior but I think Firefox has the more intuitive behavior (caveat: I'm not great at CSS). This issue comes from the Firefox Focus project, which is based on WebView; we're tracking this issue in: https://github.com/mozilla-mobile/focus-android/issues/1228 The test case is also available at: https://www.benjaminpalmero.be/overflow/
,
Oct 23 2017
Tested the issue using #62.0.3202.66 on 6.0.1: SM-J710F Build/MMB29K as per the steps mentioned below. 1. Navigated to https://www.benjaminpalmero.be/overflow/ 2. Clicked on Pseudo-Element 3. Scroll bar is triggering on first tap 4. Nothing happens on second tap Somehow observed the same behavior in Firefox as well. Untriaged as this seems to be a Non-Regression issue. Note: Nothing happens on clicking Pseudo-Element in Chrome Desktop. Please navigate to below link for log's and video-- go/chrome-androidlogs/776865 Thanks!!
,
Oct 23 2017
The test page, https://www.benjaminpalmero.be/overflow/, has been modified: please use the attached test case for the original STR. That being said, I still observe strange behavior on the updated page with regards to horizontal scrolling. Here are some additional comments from our bug (https://github.com/mozilla-mobile/focus-android/issues/1228#issuecomment-338595997): > I tried some other things, and it seems like the problem occurs only when the overflow property is set on the body. > > If I put all the divs inside a section and set the overflow-x: hidden on the section, there is no horizontal scroll. > > I've added this to my test page: http://www.benjaminpalmero.be/overflow > > And indeed, firefox mobile has the most intuitive behavior since overflow: hidden is supposed to hide elements that are outside of their "parent's size". --- > Somehow observed the same behavior in Firefox as well. To be explicit, in my experience, Firefox, based on Gecko, does *not* have the same behavior as Chrome but Firefox Focus, based on WebKit, does have the same behavior as Chrome.
,
Oct 30 2017
Ian, would you mind commenting on this? |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by nyerramilli@chromium.org
, Oct 23 2017