SVG foreignObject render issue in Chrome and Safari

Question

I am trying to include some HTML canvas rendered chart in a SVG component.

However, the foreignObject rendering does not work as expected in Chrome and Safari. Problem in Chrome, Edge and Safari is that the rendered objects show on top of any overlapping SVG elements.

Setting z-index does not make a difference.

html

            <foreignObject x="0" y="0" width="200px" height="100px">
                <div class="container" xmlns="http://www.w3.org/2000/xmlns/">
                    <div class="inner">
                        <canvas></canvas>
                    </div>
                    <div class="overlap-test"></div>
                </div>
            </foreignObject>

css

    .chart-container foreignObject {
        .container {
            width: 100%;
            height: 100%;
            background: rgb(24, 24, 24);
            border-radius: 5px;
            overflow: hidden;
            position: fixed; // fix for relative position on safari
            .inner {
                position: absolute;
                top: 15px; 
                left: 15px;
                width: 180px;
                height: 80px;
                background-color: rgb(100, 92, 81);
                canvas {
                    width: 100%;
                    height: 100%;
                }
            }
            .overlap-test {
                position: absolute;
                top: 5px; 
                left: 5px;
                width: 80px;
                height: 80px;
                background: green;
            }
        }
    }

and test code

    const elm = this.elm.querySelector(`canvas`) as HTMLCanvasElement;
    if (elm) {
        const ctx = elm.getContext('2d');
        setTimeout(() => {
            ctx.fillStyle = 'orange';
            ctx.fillRect(100, 100, 150, 30);
        }, 1000);
    }

Answer 1

I don't know about Safari but the chromium team knows about this:

https://bugs.chromium.org/p/chromium/issues/detail?id=842668#c26

I was told to track this bug for a fix.