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
<rdar://problem/90320701>
This has regressed at r282737.
Created attachment 454745 [details] slightly more visible (test reduction)
we are missing some visual overflow here.
Created attachment 454772 [details] Patch
Created attachment 454774 [details] Patch
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.
Created attachment 454784 [details] Patch
(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.
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].
Wow, fixed within 12 hours of reporting. Thanks everyone!
(In reply to Benoît Rouleau from comment #11) > Wow, fixed within 12 hours of reporting. Thanks everyone! Thank you for reporting it!
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!
(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.
Just to let everyone know, for those who care about Safari, the fix for this has shipped in Safari 15.5.