Bug 240410 - Changing text color and removing line-clamp on hover causes text to disappear permanently
Summary: Changing text color and removing line-clamp on hover causes text to disappear...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-05-13 19:49 PDT by Jordan Pittman
Modified: 2022-05-19 12:57 PDT (History)
11 users (show)

See Also:


Attachments
A short example that reproduces the issue (774 bytes, text/html)
2022-05-13 19:49 PDT, Jordan Pittman
no flags Details
Test reduction (318 bytes, text/html)
2022-05-14 09:49 PDT, zalan
no flags Details
Patch (4.31 KB, patch)
2022-05-14 13:28 PDT, zalan
no flags Details | Formatted Diff | Diff
[fast-cq]Patch (1.25 KB, patch)
2022-05-19 08:19 PDT, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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].