Bug 240410

Summary:

Changing text color and removing line-clamp on hover causes text to disappear permanently

Product:

WebKit

Reporter:

Jordan Pittman <jordan>

Component:

Layout and Rendering

Assignee:

zalan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, changseok, darin, esprehn+autocc, ews-watchlist, glenn, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Attachments:

Description	Flags
A short example that reproduces the issue	none
Test reduction	none
Patch	none
[fast-cq]Patch	none

Description Jordan Pittman 2022-05-13 19:49:29 PDT

Created attachment 459339 [details]
A short example that reproduces the issue

In Safari 15.4, as well as the latest nightly build (`250551@main`), when you have an element that:

1. Has it's text truncated using `-webkit-box-orient` and `-webkit-line-clamp`
2. Changes the rendered color on `:hover`
3. Unsets, reverts, or otherwise removes the line-clamp on `:hover`
4. Has an "auto" height

Then, the text will change color and render all lines for as long as you hover. However, once the pointer leaves the element it "permanently" collapses to zero height and effectively disappears. The reported client height for the element in JS is 0px.

I've attached a file that reproduces the bug but for a quicker reproduction here is a jsfiddle link: https://jsfiddle.net/d3nqryke/

Observational notes:
- Equivalent colors specified using different syntax do not cause the bug. The *rendered* color must change.
- Specifying a non-auto height or flex-basis in a flex container prevents the bug
- Forcing a repaint / re-layout by toggling the any of the pseudo-class styles (:active, :hover, :focus, :visited) in the Safari Dev Tools on the element itself or any ancestor element will cause the element to re-appear temporarily until you hover and leave it again.
- Attempting to force a layout calculation / reflow using `clientTop`/`clientLeft`/etc… properties on element or document do not cause affected elements to re-appear.

Comment 1 zalan 2022-05-13 20:22:34 PDT

Oh wow. Thanks for the report. Very curious. Will look into it.

Comment 2 zalan 2022-05-14 09:49:37 PDT

Created attachment 459356 [details]
Test reduction

Comment 3 zalan 2022-05-14 09:53:56 PDT

B---YGLS- --* RenderView at (0,0) size 1385x753 renderer->(0x1370007b0)
B-----LS- --    HTML RenderBlock at (0,0) size 1385x753 renderer->(0x137001640) node->(0x137004dd0)
B-------- --      BODY RenderBody at (8,8) size 1369x737 renderer->(0x137001780) node->(0x1370050d0)
B--O--LS- --        DIV RenderDeprecatedFlexibleBox at (0,0) size 100x0 renderer->(0x137002f60) node->(0x1370051f0) (layout overflow 0,0 100x90)
B---YG--- --          RenderBlock at (0,0) size 100x0 renderer->(0x137002c50) (layout overflow 0,0 100x90) (visual overflow 0,0 100x90)
-------- --            line at (0.00,0.00) size (100.00x18.00) baseline (14.00) enclosing top (0.00) bottom (18.00)
-------- --              Inline level boxes:
-------- --                Inline box at (0.00,0.00) size (97.78x18.00)
-------- --              Runs:
-------- --                box box at (0.00,0.00) size 97.78x18.00
-------- --                text box at (0.00,0.00) size 97.78x18.00 box(0, 16)


^^ The RenderDeprecatedFlexibleBox's height computes to 0px.

Comment 4 zalan 2022-05-14 13:28:51 PDT

Created attachment 459360 [details]
Patch

Comment 5 EWS 2022-05-14 15:40:51 PDT

Committed r294211 (250569@main): <https://commits.webkit.org/250569@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 459360 [details].

Comment 6 Radar WebKit Bug Importer 2022-05-14 15:41:14 PDT

<rdar://problem/93296716>

Comment 7 Darin Adler 2022-05-16 10:01:43 PDT

Comment on attachment 459360 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=459360&action=review

> Source/WebCore/rendering/RenderDeprecatedFlexibleBox.cpp:189
> +            if (hadLineClamp && !hasLineClamp)

This if statement doesn’t have to check both.

Comment 8 zalan 2022-05-17 11:47:38 PDT

(In reply to Darin Adler from comment #7)
> Comment on attachment 459360 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=459360&action=review
> 
> > Source/WebCore/rendering/RenderDeprecatedFlexibleBox.cpp:189
> > +            if (hadLineClamp && !hasLineClamp)
> 
> This if statement doesn’t have to check both.
Indeed. Thanks!

Comment 9 zalan 2022-05-19 08:19:28 PDT

Reopening to attach new patch.

Comment 10 zalan 2022-05-19 08:19:30 PDT

Created attachment 459591 [details]
[fast-cq]Patch

Comment 11 EWS 2022-05-19 12:57:16 PDT

Committed r294503 (250760@main): <https://commits.webkit.org/250760@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 459591 [details].