1890762 - www.urvaerket.dk - Can not scroll throught the list of brands from the "Filter" option

Status: VERIFIED FIXED

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

Description

[James Graham [:jgraham]]

cant scroll in filter menu

Steps to reproduce:
Entered the website, then went to "herreure" and openee the filter and chose "mærker" in there, i can not scroll the list of brands. It works fine on chrome.

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

Comment 1

[Thomas Wisniewski [:twisniewski]]

The content of the filter, .filter-content, has a max-height:calc(100% - 120px), but Firefox doesn't resolve that to a real height, despite its container .filter.open having that height style.height set as the filters are opened. It seems to be because .filter.open has display:inline-table:

.filter {
  display: inline-table;
  color: #000;
  text-align: left;
  height: 34px;
  vertical-align: top;
}

If I change it to block, things work. @dholbert, is that a known interop issue?

We can easily fix it for now with this CSS intervention:

@media (max-width: 767px) {
  .filter.open {
    display:block;
  }
}

In addition, I must presume this is related to the issue with salling.dk in bug 1966330, since they also use 767px as a responsive breakpoint, and have the same style of filter-scrolling breakage due to a similar container-height-resolving issue, and use the same cookie banner.

Comment 2

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1890762 - add an Android-only JS webcompat intervention for urvaerket.dk to fix broken scrolling of their filters; r?denschub

Comment 4

[Daniel Holbert [:dholbert]]

For other people testing this later on: this site is broken in unrelated ways (and in particular the "filter" button does nothing) if you just view it in a skinny mobile-like browser window. To get to the version of the site where you can test this bug, you need to actually load/reload the page in RDM with a mobile device chosen (or use Firefox on a real Android phone).

With that: I can reproduce the issue, and I think it's a version of bug 1598458. (The .filter-content element is a block that gets wrapped in an anonymous auto-sized table-cell -- and its percentage height tries to resolve against that auto-height table-cell and fails to resolve in Firefox, but it does get resolved against the table-height in other browsers as described in bug bug 1598458.)

(I'll remove bug 1890765 from the dependency list since that webcompat KB bug probably doesn't serve much purpose at this point; I'll post more details there.)

Note that we had older bug 1838524 filed for another bit of breakage for the same reason on this same site. I didn't retest whether that was still broken, but if it is, we might want to broaden the intervention here to cover that part as well.

Comment 5

[Thomas Wisniewski [:twisniewski]]

Thankfully, I'm no longer seeing any obvious gaps on Chrome or Firefox like I saw in bug 1838524, so I think the intervention I've attached is sufficient.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/746b63b4f378
https://hg.mozilla.org/integration/autoland/rev/72738d46a88e
add an Android-only JS webcompat intervention for urvaerket.dk to fix broken scrolling of their filters; r=denschub,webcompat-reviewers

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/72738d46a88e

Comment 8

[Thomas Wisniewski [:twisniewski]]

It looks like the site may have changed their mobile layout and fixed things here.

Comment 9

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1890762 - remove our webcompat intervention for urvaerket.dk; r?denschub

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/424a165e85f9
https://hg.mozilla.org/integration/autoland/rev/bdc9f655a652
remove our webcompat intervention for urvaerket.dk; r=denschub,webcompat-reviewers

Comment 11

[Cristina Horotan [:chorotan]]

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

Comment 12

[Calin Tanase]

Verified, the issue no longer reproduces.

Tested with:

• Browser / Version: Firefox 145.0-candidate build 1
• Operating System: Windows 10