Bug 207013 - -webkit-line-clamp does not truncate with ellipsis on visibility:hidden element
Summary: -webkit-line-clamp does not truncate with ellipsis on visibility:hidden element
Status: RESOLVED DUPLICATE of bug 45399
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 13
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2020-01-30 12:18 PST by Kenneth Kufluk
Modified: 2021-12-02 10:17 PST (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Kenneth Kufluk 2020-01-30 12:18:11 PST
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.
Comment 1 Radar WebKit Bug Importer 2020-01-30 14:11:55 PST
<rdar://problem/59041496>
Comment 2 Simon Fraser (smfr) 2020-01-31 17:07:28 PST
WebKit's behavior seems to match Chrome, but both differ from Firefox.
Comment 3 menkhauskl 2020-11-12 13:24:44 PST
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".
Comment 4 Sam Sneddon [:gsnedders] 2021-12-02 10:17:56 PST

*** This bug has been marked as a duplicate of bug 45399 ***