1663634 - Firefox doesn't handle body with height 100vh properly with overflow:hidden on the root element

Status: REOPENED

(Core :: Layout, defect, P3)

Description

[Petru-Mugurel Lingurar [:petru]]

Reported on Fenix - https://codepen.io/radhifadlillah/full/bGpaOGy

Steps to reproduce

• Create a HTML page
• Set its body height to 100vh
• Put something (p maybe), set it to the bottom of the body
• Open the page in Firefox Mobile

Here is the pen to reproduce it.

Expected behavior

The bottom area should be visible.

Actual behavior

The paragraph is hidden in Firefox, no matter where the address bar located

Device information

Tested in Redmi Note 8 running MIUI Global 11.0.5 (Android 9). I tried in both Firefox stable and nightly :

• Firefox Daylight - GV 80.0.1
• Firefox Nightly - GV 82.0a1

Comment 1

[Hiroyuki Ikezoe (:hiro)]

It's also out of the viewport on Chrome. What's the problem?

Comment 2

[Petru-Mugurel Lingurar [:petru]]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #1)

It's also out of the viewport on Chrome. What's the problem?

Using the above pen I see that on Android Chrome allows for scrolling to see that paragraph - video
Also both the Chrome and Firefox desktop apps show the paragraph without the need to scroll.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Thank you Petru for the clarification. Then I'd say it's a dup of bug 1662823. The code pen case is exactly same case what I posted in bug 1662823.

Comment 4

[Petru-Mugurel Lingurar [:petru]]

Awesome! Thank you!

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Attachment: An example

This case is slightly different from others (e.g. bug 1663000) in terms of CSS, and the difference causes a big difference on behaviors.

So the CSS difference is the root element has overflow: hidden. It's quite unclear yet for me whether the root element is clipped by the ICB or the vh unit size.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

I asked :birtles to try the example in comment 5 on his iPhone, and on the iPhone the dynamic toolbar moves.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Filed a spec issue for this case, https://github.com/w3c/csswg-drafts/issues/5646

Comment 9

[Dennis Schubert [:denschub]]

I'm raising the webcompat priority here a significantly. There are a lot of applications that depend on the behavior of https://github.com/mozilla-mobile/fenix/issues/14839 working, mainly stuff that has important things fixed to the lower edge of the screen. One example here is the message feature on kijiji.ca, where the dynamic toolbar pretty much covers the message bar perfectly and you have no way of ever reaching that.

This probably causes a lot of issues that we're not even aware of... :(

Comment 10

[Hiroyuki Ikezoe (:hiro)]

Resetting Webcompat Priority since the webcompat issue is totally different from this bug. I filed bug 1717374 for the webcompat issue.

Comment 11

[Hiroyuki Ikezoe (:hiro)]

The CSSWG decided to add a Note like this; "overflow:hidden on the root might not clip everything outside the ICB if the ICB is smaller than the viewport, which can happen on mobile". This note sounds allowing browsers to do an irregular behavior. Indeed the irregular behavior is quite odd (at least for me).

So, I am inclined to not to fix this, instead we should implement new viewport units (bug 1723061) which will, I believe, let web developers avoid using 100vh and overflow:hidden at the same time. Degrading priority for now.

Comment 12

[nthomas]

Hello all, I'm not sure if I should open a new issue for this because it seems like it might be related to this one, but on Android devices without physical back buttons, etc on them, you have a virtual button toolbar on the bottom that obscures the bottom of all pages. When displaying any content that is supposed to use 100 percent of the viewport, the bottom is hidden and the user must scroll down to see content that was already supposed to be visible. Since it's always there, I feel like this toolbar should be excluded from the HTML viewport, unless there is a better solution.

Comment 13

[Hiroyuki Ikezoe (:hiro)]

(In reply to nthomas from comment #12)

When displaying any content that is supposed to use 100 percent of the viewport, the bottom is hidden and the user must scroll down to see content that was already supposed to be visible.

That's definitely a different issue. It would be nice to open a new bug, it would also be nice to have a simple test case. Thanks!

Comment 14

[nthomas]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #13)

(In reply to nthomas from comment #12)

When displaying any content that is supposed to use 100 percent of the viewport, the bottom is hidden and the user must scroll down to see content that was already supposed to be visible.

That's definitely a different issue. It would be nice to open a new bug, it would also be nice to have a simple test case. Thanks!

Great, thank you very much, I just wanted to check here first before I went and opened a new ticket. I will also provide all the necessary testing details.

Comment 15

[Dennis Schubert [:denschub]]

Unsetting the WebCompat Priority flag here based on Comment 10 and Comment 11, so we don't have any real-site-breakage for this issue. However, there still is bug 1123938, which has P1 already.

Comment 18

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is relatively low, S3. However, the bug has 3 duplicates.
:dholbert, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.