Closed Bug 1937466 Opened 2 months ago Closed 2 months ago

Firefox 133.0.3 -webkit-line-clamp with overflow-y:scroll - scrolled lines don't show up

Categories

(Core :: Layout, defect)

Firefox 133
defect

Tracking

()

RESOLVED DUPLICATE of bug 1934547

People

(Reporter: wieczorek2003, Unassigned)

Details

Attachments

(2 files)

Attached image 1.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Steps to reproduce:

I opened site with some reviews. Too long reviews were shortened with -webkit-line-clamp: 3. There was also overflow-y:scroll and I scrolled down.

Actual results:

Scrolled lines (those further that were not limited) don't show up.

Expected results:

Scrolled lines (those further that are not limited) should show up and be visible.

Component: Untriaged → Layout
Product: Firefox → Core

Thanks for the report! I suspect this is the same thing we investigated in bug 1934547, and that was recently fixed (in 135 Nightly and 134beta, though it hasn't yet made it to a beta build yet) by putting the new behavior behind an about:config pref. (That bug is focused on absolutely-positioned content but the fix isn't specific to that.)

Would you mind sharing a link to the affected site? The site might need to change to account for a recent spec resolution. It's a bit odd to expect line-clamped lines to be visible when scrolled (even though that's historically how things have worked); the fact that those lines were still painted is kind-of considered to be a bug and causes undesired outcomes in other use-cases.

Status: UNCONFIRMED → RESOLVED
Closed: 2 months ago
Duplicate of bug: 1934547
Flags: needinfo?(wieczorek2003)
Resolution: --- → DUPLICATE

Side note: as discussed in bug 1934547, Chrome matches the Firefox 133 behavior in this area (and likely triggers the same bug on whatever site you were seeing this on) if you visit their internal chrome://flags page, and toggle "experimental web-platform-features" to be enabled.

(Both Firefox 133 and Chrome-with-that-flag-toggled are implementing a recent spec change there about hiding clamped lines. However, given the breakage, we've decided to roll back that change to reconsider a bit, via the patch on bug 1934547)

Hi Daniel,
thanks for your reply, however I'm adding additional information as you asked.

FYI this website had no problem with displaying scroll lines in version 130.0 (that's what my friend was using the day I opened the ticket) and updated to version 133.0.3. Same problem.

https://www.erecept.pl/opinie?type=0 (if there aren't any longer reviews with scroll, then just select another page from bottom bar)

I think the best example I thought was here in codepen snippet:
https://codepen.io/Ansimorph/pen/GRoVxOQ

In CSS section changing "overflow: hidden" -> "overflowy-y: scroll" also causes the problem.

Flags: needinfo?(wieczorek2003)

Thanks - yeah, that should be fixed by the patch that landed on bug 1934547.

For what it's worth, the pattern you're describing (and which this erecept.pl site is using) is already broken in at least one way, as shown in the screenshot here. The thing that makes that pattern already-broken is that the ellipsis does not get get fully factored into the text-layout computations when doing line-wrapping; so if the last word on the line-clamped line happens to be really close to the far end of its line, then the ellipsis will simply overwrite it and there's no way to read that word.

In my screenshot, that word is "YOU" (which I swapped in to replace the word "I" in your linked codepen, just for illustration's sake, to intentionally make the content just right so that it would trip over this issue - you might need a different longer/shorter word to trigger the problem depending on your fonts/etc). The rendered result is just "Y..." and there's no way to see the "OU". This happens in both Firefox and Chrome and I assume Safari as well, probably going back ~forever. (I'm including a screenshot of Chrome just to illustrate that this side-issue isn't Firefox-specific.)

This particular "Y..." problem is sort-of by-design -- the point is that all content after the ellipsis is conceptually meant to be hidden, so it's not expected to be a problem for these letters to be missing. (Though for now that content is potentially scrollable because -webkit-line-clamp is kind of a kludge, which is why typically people combine it with overflow:hidden to attempt to hide it so that it makes sense, so that you ellipsize the whole end of a paragraph, rather than arbitrarily losing a few characters in the middle of a paragraph.)

People are trying to make it less-of-a-kludge as part of the standardization process as discussed in bug 1934547.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: