Bug 207013
| Summary: | -webkit-line-clamp does not truncate with ellipsis on visibility:hidden element | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Kenneth Kufluk <kenneth> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | bfulgham, menkhauskl, mmaxfield, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 13 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Kenneth Kufluk
This bug occurs in Chrome/Blink and Safari/Webkit.
I am using the -webkit-line-clamp rule to add multiline truncation and ellipsis.
This mostly works.
However, when an element is first rendered with "visibility: hidden" and then the visibility is quickly toggled, the truncation and ellipsis is not applied.
It works fine when I toggle visibility using 'opacity'.
Simplified repro case:
https://glitch.com/edit/#!/hidden-ellipsis?path=index.html
This has been affecting card descriptions in the twitter.com website. I am currently working on a patch to switch from visibility to opacity.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/59041496>
Simon Fraser (smfr)
WebKit's behavior seems to match Chrome, but both differ from Firefox.
menkhauskl
I am having the same issue, though I am only seeing it on Safari.
I created this codepen https://codepen.io/menkhauskl/pen/jOrXbpB
On Chrome version 86.0.4240.183 it is truncating the ellipsis when "visibility: hidden". On Safari Version 14.0 it is not truncating the ellipsis when "visibility: hidden".
Sam Sneddon [:gsnedders]
*** This bug has been marked as a duplicate of bug 45399 ***