1151250 - Overflow-x: hidden not working when on body and html

Status: RESOLVED DUPLICATE of bug 886969

(Firefox for Android Graveyard :: General, defect)

Description

[u535898]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:36.0) Gecko/20100101 Firefox/36.0
Build ID: 20150320202338

Steps to reproduce:

Visit any website which uses overflow-x: hidden on the body and/or html.


Actual results:

Overflow-x when applied to the body and/or html isn't handled properly on Firefox for Android. Users can still scroll horizontally; sometimes in one direction but usually in both

Tested on the release, beta and nightly apps. On the other hand, it does work on Firefox for Mac and PC.


Expected results:

The user shouldn't be able to scroll horizontally when overflow-x used.

Comment 1

[u535898]

An example: http://codepen.io/chriscoyier/pen/PwzBBw

Comment 2

[Dave Lozier]

I have encountered the same issue with a Bootstrap 3 off canvas menu. (left)

If I apply overflow:hidden to the html and body tags Firefox mobile works as expected. Unfortunately this prevents other browsers from scrolling vertically. (including Firefox desktop) 

I'll be resorting to using javascript and user agent detection to work around this issue. It's an ugly hack but unavoidable at this time.

Comment 3

[Kevin Brosnan [Ex-Mozilla]]

Mike/Daniel do you know of this? Looks fairly reduced testcase already.

Comment 4

[Daniel Holbert [:dholbert]]

Given that this is a mobile-specific scrolling thing (only broken on mobile based on comment 0), kats is more likely to know what's going on than I am.

Comment 5

[Botond Ballo [:botond]]

Dupe of bug 886969?

Comment 6

[Daniel Holbert [:dholbert]]

Looks like it, thanks.

Comment 7

[GaryC]

This is still happening in the current (October 26th 2020) version of Firefox... 82.0 (64-bit) is ignoreing overlow and overflow-x values unless they have the old -moz-* value tags that were supposedly retired.

For example:
"overflow-x" in sample 1 is ignored by Firefox 82.
/---- CSS SAMPLE 1 ---/
.grid-view > table > tbody > tr > td {
white-space: nowrap;
overflow-x: hidden;
font-size: 12px;
}

While " overflow-x" in sample 2 is obeyed by Firefox 82.

/---- CSS SAMPLE 2 ---/
.grid-view > table > tbody > tr > td {
white-space: nowrap;
overflow-x: -moz-hidden-unscrollable;
font-size: 12px;
}

Comment 8

[Kevin Brosnan [Ex-Mozilla]]

Please open a new bug. Commenting in a duplicate bug is not going to get your bug fixed.