Custom nodes do not render properly on safari V16 browser.

[himanshu-1034]

I'm submitting a bug i observed on safari

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

The nodes can't be seen but I can still access on click events of the nodes.

Can somebody help me

NOTE -> the flow chart is wrapped inside react-zoom-pan-pinch

MY CODE

<foreignObject x="0" y="0" height="70" width="170" style="position: relative;"><div class="height-100 width-100 d-flex justify-content-center align-items-center" style="flex-direction: column; position: fixed;"><div style="border-width: 1px; border-style: solid; border-color: var(--gray2-color); background: var(--whitebase-color); border-radius: 10px; height: calc(100% - 20px); width: calc(100% - 16px); cursor: pointer; position: relative; padding: 5px 10px; color: var(--gray2-color);"><div class="mb-5 f-12px text-ellipses">chrome.exe</div><div class="f-12px text-ellipses">15488</div><span style="color: var(--gray2-color); position: absolute; top: 10px; border: 1px solid var(--gray2-color); border-radius: 15px; padding: 0px 4px; font-size: 8px; background: var(--whitebase-color); cursor: pointer; z-index: 100; right: -8px;">&lt;</span><span style="color: var(--gray2-color); position: absolute; top: 10px; border: 1px solid var(--gray2-color); border-radius: 15px; padding: 0px 4px; font-size: 8px; background: var(--whitebase-color); cursor: pointer; z-index: 100; left: -8px;">&lt;</span></div></div></foreignObject>

The same issue can be seen here also

https://codesandbox.io/s/v3ihh1?file=/src/index.tsx

open this in safari