RESOLVED FIXED 237898
REGRESSION (r282737): `text-shadow` is clipped
https://bugs.webkit.org/show_bug.cgi?id=237898
Summary REGRESSION (r282737): `text-shadow` is clipped
Benoît Rouleau
Reported 2022-03-15 09:12:21 PDT
In Safari 15.4, the `text-shadow` of an element can be clipped when an absolute-positioned element with `will-change: transform` appears behind it. This worked fine in Safari 15.3, and continues to work fine in other browsers. Simple reproduction here: https://codepen.io/benface/pen/yLpNpeG
Attachments
slightly more visible (test reduction) (347 bytes, text/html)
2022-03-15 13:03 PDT, zalan
no flags
Patch (5.97 KB, patch)
2022-03-15 16:31 PDT, zalan
no flags
Patch (5.97 KB, patch)
2022-03-15 16:39 PDT, zalan
no flags
Patch (5.43 KB, patch)
2022-03-15 18:47 PDT, zalan
no flags
Radar WebKit Bug Importer
Comment 1 2022-03-15 11:52:41 PDT
zalan
Comment 2 2022-03-15 12:50:18 PDT
This has regressed at r282737.
zalan
Comment 3 2022-03-15 13:03:42 PDT
Created attachment 454745 [details] slightly more visible (test reduction)
zalan
Comment 4 2022-03-15 13:37:18 PDT
we are missing some visual overflow here.
zalan
Comment 5 2022-03-15 16:31:55 PDT
zalan
Comment 6 2022-03-15 16:39:59 PDT
Darin Adler
Comment 7 2022-03-15 17:27:51 PDT
Comment on attachment 454774 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=454774&action=review > Source/WebCore/ChangeLog:9 > + Inflate the ink overflow rect with the text shadow values (note that here, in the display builder we works with physical coordinates). works -> work > Source/WebCore/layout/formattingContexts/inline/display/InlineDisplayContentBuilder.cpp:146 > + auto addTextShadowInkOverflow = [&] { Not sure we need to name this lambda. Could just make it and call it. > Source/WebCore/rendering/style/RenderStyle.h:508 > + void getTextShadowHorizontalExtent(LayoutUnit& left, LayoutUnit& right) const { getShadowHorizontalExtent(textShadow(), left, right); } Should return a struct rather than using “get” style > Source/WebCore/rendering/style/RenderStyle.h:509 > + void getTextShadowVerticalExtent(LayoutUnit& top, LayoutUnit& bottom) const { getShadowVerticalExtent(textShadow(), top, bottom); } Ditto.
zalan
Comment 8 2022-03-15 18:47:57 PDT
zalan
Comment 9 2022-03-15 19:30:26 PDT
(In reply to Darin Adler from comment #7) > Comment on attachment 454774 [details] > Patch > > View in context: > https://bugs.webkit.org/attachment.cgi?id=454774&action=review > > > Source/WebCore/ChangeLog:9 > > + Inflate the ink overflow rect with the text shadow values (note that here, in the display builder we works with physical coordinates). > > works -> work > > > Source/WebCore/layout/formattingContexts/inline/display/InlineDisplayContentBuilder.cpp:146 > > + auto addTextShadowInkOverflow = [&] { > > Not sure we need to name this lambda. Could just make it and call it. > > > Source/WebCore/rendering/style/RenderStyle.h:508 > > + void getTextShadowHorizontalExtent(LayoutUnit& left, LayoutUnit& right) const { getShadowHorizontalExtent(textShadow(), left, right); } > > Should return a struct rather than using “get” style > > > Source/WebCore/rendering/style/RenderStyle.h:509 > > + void getTextShadowVerticalExtent(LayoutUnit& top, LayoutUnit& bottom) const { getShadowVerticalExtent(textShadow(), top, bottom); } > > Ditto. Thanks for the review! Changed the patch a bit.
EWS
Comment 10 2022-03-15 21:12:53 PDT
Committed r291330 (248469@main): <https://commits.webkit.org/248469@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 454784 [details].
Benoît Rouleau
Comment 11 2022-03-16 11:04:57 PDT
Wow, fixed within 12 hours of reporting. Thanks everyone!
zalan
Comment 12 2022-03-16 11:54:27 PDT
(In reply to Benoît Rouleau from comment #11) > Wow, fixed within 12 hours of reporting. Thanks everyone! Thank you for reporting it!
Darin Adler
Comment 13 2022-03-16 12:29:16 PDT
Comment on attachment 454784 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=454784&action=review > Source/WebCore/rendering/style/RenderStyle.h:508 > + LayoutBoxExtent textShadowExtent() const { return shadowExtent(textShadow()); } Oh, that came out nicer than the "get" version!
zalan
Comment 14 2022-03-16 12:48:05 PDT
(In reply to Darin Adler from comment #13) > Comment on attachment 454784 [details] > Patch > > View in context: > https://bugs.webkit.org/attachment.cgi?id=454784&action=review > > > Source/WebCore/rendering/style/RenderStyle.h:508 > > + LayoutBoxExtent textShadowExtent() const { return shadowExtent(textShadow()); } > > Oh, that came out nicer than the "get" version! It really did. I got blinded by get_BoxShadow_HorizontalExtent/get_BoxShadow_VerticalExtent pair a few lines below. Thanks for commenting on it.
Sam Sneddon [:gsnedders]
Comment 15 2022-05-16 15:40:25 PDT
Just to let everyone know, for those who care about Safari, the fix for this has shipped in Safari 15.5.
Note You need to log in before you can comment on or make changes to this bug.