1581744 - Overflow auto doesn't allow full scrolling like in Chrome

Status: RESOLVED DUPLICATE of bug 748518

(Core :: Layout: Scrolling and Overflow, defect)

Description

[luke32j]

Attachment: 715.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0
Firefox for Android

Steps to reproduce:

Some overflow:auto elements do not allow full scrolling.
In particular, see https://www.71five.org/ in Firefox (mobile or desktop) with not very wide screen.

Actual results:

The overflow-auto menu does not let you scroll to the very bottom, as Chrome does.

Expected results:

Overflow auto should allow scrolling to the very bottom in cases like this.

Comment 1

[Raluca Popovici, Desktop QA]

Hi,
I tried to reproduce this issue but I can scroll the menu of the page on both browsers Firefox and Chrome with mobile view.
Can you please try to test on the latest Nightly build (https://nightly.mozilla.org/) and report back the results? When doing this, please use a new clean Firefox profile (https://goo.gl/AWo6h8).
Thank you!

Comment 2

[luke32j]

That would be because I found a workaround: Note that in Firefox on the .nav_wrapper element, style="box-sizing: border-box;" is added. Remove that and you will see the previous behavior.

I am not sure if Chrome or Firefox is in the wrong on this one but Chrome did not need that.

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

This might be a webcompat issue. We will probably discuss this bug in our next triage tomorrow so I will remove my needinfo for now.

Comment 4

[Brad Werth [:bradwerth]]

This looks to be a layout issue, not specific to Responsive Design Mode. Reassigning the component so it gets seen by the right people.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Attachment: Testcase.

The .nav_wrapper has padding-bottom, which in WebKit / Blink gets added to the scrollable area.

This was invalid (see bug 748518 and bug 1527949)... So yeah the math you're using with height needs box-sizing: border-box.