Bug 235106 - Rendering/clipping glitches using mix-blend mode
Summary: Rendering/clipping glitches using mix-blend mode
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
: 237077 (view as bug list)
Depends on:
Blocks:
 
Reported: 2022-01-12 03:39 PST by Jake Archibald
Modified: 2022-02-25 18:29 PST (History)
6 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Jake Archibald 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
Comment 1 Radar WebKit Bug Importer 2022-01-19 03:40:17 PST 
<rdar://problem/87763448>
Comment 2 Simon Fraser (smfr) 2022-01-19 10:40:26 PST 
Certainly looks like a repaint bug. Thanks for filing.
Comment 3 Jake Archibald 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.
Comment 4 Simon Fraser (smfr) 2022-01-21 09:08:02 PST 
Created attachment 449662 [details]
Screenshot
Comment 5 Jake Archibald 2022-01-21 09:18:07 PST 
That's the one!
Comment 6 Jay C 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.
Comment 7 Jay C 2022-02-10 20:07:25 PST 
Created attachment 451635 [details]
Video of behavior
Comment 8 Simon Fraser (smfr) 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?
Comment 9 Jay C 2022-02-11 08:23:00 PST 
Can I email you the link? It's not a public site yet.
Comment 10 Simon Fraser (smfr) 2022-02-23 19:09:01 PST 
*** Bug 237077 has been marked as a duplicate of this bug. ***
Comment 11 Simon Fraser (smfr) 2022-02-25 18:29:49 PST 
Seems to happen because the glyph projects outside of the bounds of the SVG <text> element.