Bug 235106

Summary: Rendering/clipping glitches using mix-blend mode
Product: WebKit Reporter: Jake Archibald <jaffathecake>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, chu-vevo, jay, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 12   
See Also: https://bugs.webkit.org/show_bug.cgi?id=6274
Attachments:
Description Flags
Screenshot
none
Video of behavior none

Jake Archibald
Reported 2022-01-12 03:39:37 PST
https://static-misc-3.glitch.me/composite-test/mix-blend-mode.html This is two layers which cross-fade using `mix-blend-mode: plus-lighter`. In the first example, only the top layer has `mix-blend-mode: plus-lighter`. In the second example, both layers have `mix-blend-mode: plus-lighter`. In the first example, the tail of the 'd' remains even though the element has opacity: 0. In the second example, the tail of the 'd' is cut off. This bug isn't only caused by `plus-lighter`, other blend modes also seem to cause graphical glitches. Video of issue: https://youtu.be/XsmyCzj57UU
Attachments
Screenshot (48.26 KB, image/png)
2022-01-21 09:08 PST, Simon Fraser (smfr) 		no flags
Details
Video of behavior (3.44 MB, video/mp4)
2022-02-10 20:07 PST, Jay C 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-01-19 03:40:17 PST
<rdar://problem/87763448>
Simon Fraser (smfr)
Comment 2 2022-01-19 10:40:26 PST
Certainly looks like a repaint bug. Thanks for filing.
Jake Archibald
Comment 3 2022-01-21 01:35:37 PST
Were you able to reproduce the issues? I sent the demo to a couple of folks and they couldn't.
Simon Fraser (smfr)
Comment 4 2022-01-21 09:08:02 PST
Created attachment 449662 [details] Screenshot
Jake Archibald
Comment 5 2022-01-21 09:18:07 PST
That's the one!
Jay C
Comment 6 2022-02-10 20:06:18 PST
Seeing some random behavior here with mix-blend-mode in a position: sticky header, with a white box and graphic over it. Added attachment movie and you can see the "Home" link behaves poorly. Not happening in any other browser. mix-blend-mode: exclusion is set on the white box and the gradient graphic to the right of it. Both with a z-index of 10. header has position: sticky, top: 0 with no z-index.
Jay C
Comment 7 2022-02-10 20:07:25 PST
Created attachment 451635 [details] Video of behavior
Simon Fraser (smfr)
Comment 8 2022-02-10 20:19:49 PST
Jay C: that might be a different issue. Can you share the URL, or made a codepen example of it?
Jay C
Comment 9 2022-02-11 08:23:00 PST
Can I email you the link? It's not a public site yet.
Simon Fraser (smfr)
Comment 10 2022-02-23 19:09:01 PST
*** Bug 237077 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 11 2022-02-25 18:29:49 PST
Seems to happen because the glyph projects outside of the bounds of the SVG <text> element.
Note You need to log in before you can comment on or make changes to this bug.