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

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 ***