1776683 - mix-blend-mode in SVG does not blend with content outside of SVG

Status: NEW

(Core :: SVG, defect)

Description

[dstout]

Attachment: Screenshot 2022-06-27 102605.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Steps to reproduce:

Bug reproduction: https://codepen.io/dstoutimmediac/pen/OJvLoVz

• Add an SVG element to the page
• Add mix-blend-mode onto a rect in that SVG

Actual results:

• The rect with mix-blend-mode SHOULD be blended with the background, as it does in Chrome

Expected results:

• The rect is not blended - it acts as if mix-blend-mode has not been applied.
• It DOES work correctly on Chrome, as I've shown in an attached screenshot - Firefox is on the left, Chrome is on the right

Comment 1

[dstout]

I don't see a way to edit my initial comment above - the "Actual" and "Expected" results are switched.

The actual is that it does NOT blend, the expected is that it SHOULD blend.