Safari + foreignobject render issue [SOLVED] #284
Description
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-stylewebkit-backface-visibilitytransitiontransform
How to detect Safari?
We use this snippet:
export const IS_SAFARI = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);