1829518 - Google "top stories" search result headlines aren't line-clamped in Firefox, due to UA-specific unprefixing of webkit-prefixed CSS ("line-clamp:3/display:box/box-orient:vertical")

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing the issue in Firefox and the ineffective CSS in devtools

STR, right now at least:

1. Search for some newsworthy keyword that's likely to get a Google "Top Stories" section in the search results -- e.g. "Ubuntu 23.04" (my actual search term where I ran across this) or "Ukraine" (which also reproduces this for me)
2. Look at the "Top Stories" section, and find some result which has a headline that's more than 3 lines long. If none of them do, use devtools to edit the headline text to add additional words so that it'll be longer than 3 lines.

ACTUAL RESULTS:
All of the lines of headline are displayed. The 4th line clumsily overlaps the article datestamp (e.g. "2 days ago" or "4 hours ago").

EXPECTED RESULTS:
The headline should be clamped at 3 lines.

Chrome gives EXPECTED RESULTS. Firefox gives ACTUAL RESULTS.

This is a Google bug, where they're sending us different CSS. In Chrome, the headline gets this CSS:

-webkit-line-clamp:3;
display:-webkit-box;
-webkit-box-orient:vertical;

Firefox supports all of that^ for compatibility, but unfortunately Google doesn't send us that^ CSS. It instead sends us non-standard unprefixed versions:

line-clamp:3;
display:box;
box-orient:vertical;

See attached screenshot. So that's why we don't clamp.

We should ask that Google send us the same 3 lines of CSS that they send to Chrome for this line-clamping functionality here. If I manually edit the page in devtools to add -webkit prefixes to those 3 lines, then we do clamp properly.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot in Chrome for comparison

Comment 2

[Daniel Holbert [:dholbert]]

(For the record, jrmuizel sent an email to some Google folks about this, and I followed up with a bit more detail and a link to this bug.)

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)

(For the record, jrmuizel sent an email to some Google folks about this, and I followed up with a bit more detail and a link to this bug.)

Heard back from Google folks yesterday - they're looking into it. (I just re-tested and confirmed that this is still reproducible, so it's not fixed yet, but maybe soon!)

Comment 5

[Daniel Holbert [:dholbert]]

Looks like this has been fixed. If I search Google for e.g. "Ukraine", I now see some properly-ellipsized headlines in the "Top Stories" section, and devtools confirms that the page is using the webkit-prefixed versions of the styles in comment 0.