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

Status: NEW

(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.