1806878 - SVG mix-blend-mode Does Not Work

Status: VERIFIED DUPLICATE of bug 1379524

(Core :: Graphics: WebRender, defect)

Description

[Lorand Zudor]

Attachment: Firefox-Blending-Bug.svg

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Steps to reproduce:

In SVG there is a group "A" with 2 elements:

• a rectangle

• another group "B" having an ellipse
  https://codepen.io/lzudor/pen/eYjmbmb - example on the left

  <g>
  <rect x="100" y="100" width="200" height="200" fill="#05f" stroke="#00ff04" stroke-width="10"/>
  <g>
  <ellipse style="mix-blend-mode:multiply" cx="125" cy="125" rx="100" ry="100" fill="purple" stroke="red" stroke-width="10"/>
  </g>
  </g>

If group "B" has any transform attribute set, blending does not work any longer:

<g>
    <rect x="100" y="100" width="200" height="200" fill="#05f" stroke="#00ff04" stroke-width="10"/>
    <g transform="translate(0,0)">
        <ellipse style="mix-blend-mode:multiply" cx="125" cy="125" rx="100" ry="100" fill="purple" stroke="red" stroke-width="10"/>
    </g>
</g>

User agent:
"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0" (issue appears on windows as well & on other versions, too).

Actual results:

• if group "B" has any transform attribute set, blending does not work any longer
• even if transform has no effect ("translate(0,0)", "scale(1)", "scale(1,1)", etc.)
• works well though in other browsers

Expected results:

• blending should be applied normally
• as on the 1st example
• and as in other browsers

Comment 1

[Lorand Zudor]

Attachment: mix-blend-mode works well on Chrome for the same case; fails on Firefox

https://codepen.io/lzudor/pen/eYjmbmb

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 4

[Lorand Zudor]

I think marking this bug as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1379524 is misleading, since that bug says "When using mix-blend-mode on SVG, it works well." - this is not the case; also, given bug has been opened for 6 years.