1966330 - salling.dk - Unable to scroll the filter menu

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Calin Tanase]

Environment:
Operating system: Android 15
Firefox version: Firefox Mobile [phone]

Steps to reproduce:

1. Go to https://salling.dk/herre/toej/c-11905/
2. Tap on "Filtrer".
3. Open any type of filter that has many options (e.g. "Kategori")
4. Try scrolling the list.

Expected Behavior:
The list can be scrolled.

Actual Behavior:
Unable to scroll the list of filters.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/154134

Comment 1

[Calin Tanase]

Attachment: salling.dk Nightly vs Chrome.mp4

Comment 2

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

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 3

[Dennis Schubert [:denschub]]

Reproducible in RDM, too.

Comment 4

[Daniel Holbert [:dholbert]]

This is the relevant rule:

@media (max-width:767px) {
  .overlay-mobile--bottom[data-v-b8c57b06],
  .overlay-mobile--top[data-v-b8c57b06] {
    height:auto;
    max-height:calc(100vh - 64px);
    max-height:-webkit-fill-available;
    max-height:-moz-available;
    max-height:stretch;
    max-height: 100%;
  }

The max-height decls there are meant to limit this element to the height of the viewport -- but in Firefox, we parse max-height: -moz-available which we treat as the initial value i.e. no maximum height.

Bugs whose fixes would help here:

Bug 1872755 (-webkit-fill-available) will not help here -- even if our implementation of that keyword is perfect, it'll be overridden here due to the order of the declarations.
To get the right outcome here, we need -moz-available to do the right thing in the vertical axis (bug 567039) or we need to ship support for stretch (bug 1789477).

Interventions:
In the meantime, this intervention should paper over the problem:

@media (max-width:767px) {
  .overlay-mobile--bottom[data-v-b8c57b06],
  .overlay-mobile--top[data-v-b8c57b06] {
    max-height: 100%;
  }
}

Comment 5

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1966330 - add a CSS webcompat intervention for salling.dk mobile layout so filters can be scrolled; r?denschub

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/0da2dc3ff2eb
https://hg.mozilla.org/integration/autoland/rev/f211e4925ca9
add a CSS webcompat intervention for salling.dk mobile layout so filters can be scrolled; r=denschub,webcompat-reviewers

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/f211e4925ca9