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

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Jordan Pittman]

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.

[zalan]

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

[zalan]

Created attachment 459356 [details]
Test reduction

[zalan]

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.

[zalan]

Created attachment 459360 [details]
Patch

[EWS]

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].

[Radar WebKit Bug Importer]

<rdar://problem/93296716>

[Darin Adler]

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.

[zalan]

(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!

[zalan]

Reopening to attach new patch.

[zalan]

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

[EWS]

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].