Safari + foreignobject render issue [SOLVED]

[ankero]

This is not an issue, but something that could be added to the README. I'll add it here so if someone faces a similar issue, a solution can be found in this repo.

When developing with this libary and if you use foreignobject to render a node, check how it is displayed in Safari (Mac + iOS). We faced an issue, where the node content was rendered to coordinates 0,0 (top-left corner) of the parent SVG. This is due to a bug in Safari, which affects foreignobjects to calculate the rendering position based on the top SVG and not the foreignobject itself. You could see this effect very clearly by inspecting the node and seeing that the node, based on the browser, is where it should be, but it was rendered in the wrong place.

So what's the solution if you see this issue?
As far as I saw, if you use any of the following CSS options, the dom element will render in the wrong place. So fix is not to use these. For us, we needed to check if the browser is Safari and then remove some functionalities that required one or more of these styles:

So do not use the following styles in Safari + foreignobjects:

• position (You can use position:fixed but that will introduce an overflow issue)
• webkit-transform-style
• webkit-backface-visibility
• transition
• transform

How to detect Safari?
We use this snippet:
export const IS_SAFARI = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

[edo]

Thanks for posting this @ankero. Was struggling with this same issue and couln't find it.

[bkrem]

Thanks so much for explaining this issue for everyone @ankero 🙏 I'm going to pin this great explanation and add a link to the issue in the readme.

Sorry for the delay on any action here, I'm only now coming back to the library to keep working on v2 and recent issues/critical v1 patches after a lengthy stint of being unwell (fortunately unrelated to current events) and some high prio offline concerns.

I believe we had another issue going discussing this bug, which I'll close and forward to this one now. If you have questions and/or suggestions around this bug, please post them here rather than opening a new issue.

[hiep294]

In safari, I found opacity also causes bugs.
<foreignObject
y="calc(100% - 49px)"

calc may not work as expected

[Damon99999]

This is not an issue, but something that could be added to the README. I'll add it here so if someone faces a similar issue, a solution can be found in this repo.

When developing with this libary and if you use foreignobject to render a node, check how it is displayed in Safari (Mac + iOS). We faced an issue, where the node content was rendered to coordinates 0,0 (top-left corner) of the parent SVG. This is due to a bug in Safari, which affects foreignobjects to calculate the rendering position based on the top SVG and not the foreignobject itself. You could see this effect very clearly by inspecting the node and seeing that the node, based on the browser, is where it should be, but it was rendered in the wrong place.

So what's the solution if you see this issue? As far as I saw, if you use any of the following CSS options, the dom element will render in the wrong place. So fix is not to use these. For us, we needed to check if the browser is Safari and then remove some functionalities that required one or more of these styles:

So do not use the following styles in Safari + foreignobjects:

• position (You can use position:fixed but that will introduce an overflow issue)
• webkit-transform-style
• webkit-backface-visibility
• transition
• transform

How to detect Safari? We use this snippet: export const IS_SAFARI = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

thx, In my project, the node position was wrong and the size was scaled down

[remon25]

Thanks so much

[sophiebits]

https://bugs.webkit.org/show_bug.cgi?id=23113 looks to be the upstream issue for this bug.