Rendering/clipping glitches using mix-blend mode

• Component: Layout and Rendering
• Status: NEW ---

[Jake Archibald]

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

[Radar WebKit Bug Importer]

<rdar://problem/87763448>

[Simon Fraser (smfr)]

Certainly looks like a repaint bug. Thanks for filing.

[Jake Archibald]

Were you able to reproduce the issues? I sent the demo to a couple of folks and they couldn't.

[Simon Fraser (smfr)]

Created attachment 449662 [details]
Screenshot

[Jake Archibald]

That's the one!

[Jay C]

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]

Created attachment 451635 [details]
Video of behavior

[Simon Fraser (smfr)]

Jay C: that might be a different issue. Can you share the URL, or made a codepen example of it?

[Jay C]

Can I email you the link? It's not a public site yet.

[Simon Fraser (smfr)]

*** Bug 237077 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

Seems to happen because the glyph projects outside of the bounds of the SVG <text> element.