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
Keywords: InRadar
: 237077 (view as bug list)
Depends on:
Reported: 2022-01-12 03:39 PST by Jake Archibald
Modified: 2022-02-25 18:29 PST (History)
6 users (show)

See Also:

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

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

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
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]
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.