CSS stacking context affecting SVG opacity? - css

Question

I came across an "issue happening on Safari" raised which finally lead me to discover a very different behaviour on some scenario on Chromium based browsers vs. Firefox vs. Safari, with 3 different results. But I can't really find any reference on specifications about if there is any reason for what any of them do or which is the right behaviour.
Scenario can be checked on this snippet - code is not much interesting, preview is.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<symbol id="flag" viewBox="0 0 600 200">
<defs>
<linearGradient id="prefix__e" x1="27.243%" x2="72.757%" y1="67.663%" y2="32.348%">
<stop offset="0%"/>
<stop offset="100%" stop-opacity="0"/>
</linearGradient>
<path id="prefix__a" d="M0 0H700V600H0z"/>
</defs>
<g style="mix-blend-mode:multiply" fill="none" fill-rule="evenodd">
<mask id="prefix__b" fill="#fff">
<use xlink:href="#prefix__a"/>
</mask>
<g style="mix-blend-mode:multiply" mask="url(#prefix__b)">
<g>
<g>
<path fill="#592C82" d="M349.941 0L0 95.825 0 469.766 0 977.167 350.059 1071.707 700 977.167 700 95.825 700 95.706z" transform="matrix(1 0 0 -1 0 600) translate(0 95.043)"/>
<path fill="url(#prefix__e)" fill-opacity=".6" d="M349.941 0L0 95.825 0 469.766 0 977.167 350.059 1071.707 700 977.167 700 95.825 700 95.706z" transform="matrix(1 0 0 -1 0 600) translate(0 95.043)"/>
</g>
</g>
</g>
</g>
</symbol>
</svg>
<div>
<div style="background: blue; height: 40px">below svg is at same stacking context</div>
<div style=" transform: none">
<svg width="300" height="100" style="margin-left: 50px; margin-top: -20px;">
<use xlink:href="#flag"></use>
</svg>
</div>
<hr>
<div style="background: blue; height: 40px">below svg has own stacking context (translate)</div>
<div style=" transform: translate(0, 0 );">
<svg width="300" height="100" style="margin-left: 50px; margin-top: -20px;">
<use xlink:href="#flag"></use>
</svg>
</div>
<hr>
<div style="background: blue; height: 40px">below svg has own stacking context (opacity)</div>
<div style=" filter: opacity(100%);">
<svg width="300" height="100" style="margin-left: 50px; margin-top: -20px;">
<use xlink:href="#flag"></use>
</svg>
</div>
</div>
SVG is purple semi transparent, blue divs are just behind the SVG. When SVG is transparent and overlaps other HTML content, it sometimes allows to see the content below, sometimes it doesn't. My conclusions are next:
On Chromium based browsers, transparency works as expected - mixing colours with the background element until the SVG is placed in a different stacking context, then opacity stops allowing seeing behind elements from other stacking contexts.
On Safari for Mac, it seems to work similar to Chromium but maybe in a buggy way? When in the same stacking context transparency works. If you move the SVG into a new stacking context using some properties like filter transparency stops, but other properties don't stop the transparency - like transform.
On Firefox, transparency simply don't work, elements behind the transparent SVG are not visible through it, even on same stacking context.
Any idea about the specs saying something about this?
Thank you in advance.