2000558 - www.jal.co.jp - Table is not rendered correctly, only the first column gets displayed

Status: ASSIGNED

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

Description

[Calin Tanase]

Environment:
Operating system: Windows 10
Firefox version: Firefox 121.0/145/147

Steps to reproduce:

1. Go to https://www.jal.co.jp/jp/ja/jalmile/use/jal/inter/routemiles.html
2. Scroll down a little.
3. Click on any of the drop downs from the list.
4. Observe the table layout.

Expected Behavior:
The table is fully visible.

Actual Behavior:
The table is broken, only the first column gets displayed.

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/130020

Comment 1

[Calin Tanase]

Attachment: image.png

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

[Alice0775 White]

The problem is the following site CSS.

@media (min-width: 740px) {
  .fixed_th1st table {
    width: 100% !important;
  }

}

Workaround:

  .fixed_th1st table {
    width: auto !important;
  }

Comment 4

[Brian Birtles (:birtles)]

As far as I can tell, Chrome gets the same CSS so I suspect it's a bug/interop issue in our table layout. Perhaps there is an existing bug for this?

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Probably bug 1184430. I'd defer the final decision to Daniel.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 7

[Daniel Holbert [:dholbert]]

(In reply to Alice0775 White from comment #3)

The problem is the following site CSS.

This^ was a good insight! I'll share a bit more since I noticed another relevant bit of CSS. Here's a slightly broader quote of the site's CSS:

    .fixed_th1st table {
        width: auto !important;
        min-width: max-content;
    }
[...]
    @media (min-width: 740px){
        .fixed_th1st table {
            width: 100% !important;
        }

Dropping min-width: max-content seems to work around this bug as well. So it's the combination of width:100% with min-width: max-content that's causing trouble here, and removing either one seems to address this bug.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (where text is wider than container so that 'min-width: max-content' is a bit more relevant)

Comment 10

[Daniel Holbert [:dholbert]]

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

Probably bug 1184430. I'd defer the final decision to Daniel.

I think that's accurate.

This is a bit interesting since Safari suffers from bug 1184430 as well, and yet they happen to render the testcases here without any giant content. I think that's just because they're ignoring the min-width: max-content declaration entirely here, though. (They don't seem to impose any content-based min-width on the table, despite that declaration; so they don't go down their version of the content-based-sizing codepath where bug 1184430 comes into play.)

Comment 11

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 2000558 - add CSS webcompat intervention for www.jal.co.jp; r?ksenia

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/763eb1c301cc
https://hg.mozilla.org/integration/autoland/rev/f1b0197f8842
add CSS webcompat intervention for www.jal.co.jp; r=ksenia,webcompat-reviewers

Comment 13

[Serban Stanca [:SerbanS]]

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