1918019 - "AI Story Time" ( https://story.betterchinese.com/ ) renders with overlapping/collapsed content in Firefox

Status: VERIFIED FIXED

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

Description

[Daniel Holbert [:dholbert]]

https://story.betterchinese.com/ has a few rendering glitches in Firefox that seem to boil down to height: -webkit-fill-available being unsupported.

Easiest one to see is on the landing page, where the version number and Terms of Service / Privacy Policy links are near the vertical-center of the page and overlap the "Create an account" button in Firefox, vs. they're at the bottom of the page in Chrome. I can poke Chrome to match Firefox' bad rendering by using devtools to disable the .Login_divContent__KHTNy { ... height: -webkit-fill-available; ... } declaration, so it's likely that we'd get the correct rendering if we supported height: -webkit-fill-available here.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of landing page in Firefox (left) vs Chrome (Right)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of signed-in UI in Firefox (upper left) vs. Chrome (bottom right)

Once signed in (I've got access to an account through a family member's school), the site is ~unusable in Firefox, as shown here. Firefox doesn't show the "Popular" section at all and collapses the "Today's story" into the upper left corner, and the header bar's icons are smooshed together rather than spreading to fill the viewport.

I can nudge Chrome to match Firefox's bad rendering by removing height: -webkit-fill-available from the .Home_divStoryListSubContent__bNvzK style rule and by removing width: -webkit-fill-available; from the .Home_divTopToolSubContent__cvWUf style rule. So, it looks like supporting -webkit-fill-available would probably make things Just Work here, too.

Comment 4

[Daniel Holbert [:dholbert]]

I've posted a partially-reduced testcase, generated from the testcase-reducer add-on, to make it easier to retest this in the future without necessarily needing to be signed in. It givers essentially the same renderings as shown in Comment 2, in Firefox vs. Chrome.

I've marked the testcase 'private' on bugzilla out of an abundance of caution, to protect the account-holder in case there are any auth tokens or other private data included in the markup that testcase-reducer captured.

Comment 5

[Daniel Holbert [:dholbert]]

The unauthenticated landing page and partially-reduced testcase render as-expected in latest Nightly 135.0a1 (2024-12-14) if I enable about:config pref layout.css.webkit-fill-available.enabled.

Comment 6

[Daniel Holbert [:dholbert]]

This should be fixed by the patch that I've just staged to land in bug 1988938. I just tested with the attached [private] testcase, in a local build with that patch applied, and I confirmed that it's fixed.

--> Closing, and removing dependency on bug 1872755 (which remains open and tracks broader support that's not needed here).

Comment 7

[Raul Bucata]

Verified as reproducible using the RC Build

Tested with:

Browser / Version: Firefox 144.0-candidate build 1
Operating System: Windows 10 PRO x64

Comment 8

[Raul Bucata]

Attachment: chr vs rc

Comment 9

[Raul Bucata]

Also, the intervention for this site is no longer present in about:compat

Comment 10

[Thomas Wisniewski [:twisniewski]]

I'm not seeing any issue when I enable layout.css.webkit-fill-available.enabled (it's on by default in nightly builds). Raul, is that maybe why you're seeing an issue here? I suppose we can ship an intervention for builds where that flag is disabled, but they seem to be using webkit-fill-available all over the place in their CSS, including on widths, so it might not be easy to figure out work-arounds for all of the potential breakage.

Comment 11

[Daniel Holbert [:dholbert]]

Yeah, it's expected that this is broken in 144 but fixed in 145 so comment 7 is unsurprising.

Not worth spinning up an intervention at this point. Re-closing and marking 144 as wontfix.

Comment 12

[Daniel Holbert [:dholbert]]

(In reply to Raul Bucata from comment #9)

Also, the intervention for this site is no longer present in about:compat

(I don't believe we ever had one in this case)

Comment 13

[Calin Tanase]

Verified, this is still an issue with the RC 145. However it works on Nightly (146.0a1 - 2025-11-05)

Tested with:

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

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Bug 1988938 was reverted from 145, so that's not a surprising result.

Comment 15

[Calin Tanase]

Verified, the issue no longer reproduces.

Tested with:

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