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
Certainly looks like a repaint bug. Thanks for filing.
Were you able to reproduce the issues? I sent the demo to a couple of folks and they couldn't.
Created attachment 449662 [details]
That's the one!
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.
Created attachment 451635 [details]
Video of behavior
Jay C: that might be a different issue. Can you share the URL, or made a codepen example of it?
Can I email you the link? It's not a public site yet.
*** Bug 237077 has been marked as a duplicate of this bug. ***
Seems to happen because the glyph projects outside of the bounds of the SVG <text> element.