[Bug report]safari浏览器下，自定义HTML节点不能正常使用定位

[leeeeup]

问题描述

请用简洁的语言描述你遇到的 bug，至少包括以下部分，如提供截图请尽量完整：

safari浏览器下，自定义HTML节点不能正常使用定位

最简复现

https://codesandbox.io/s/logicflow-base7-forked-zr3t32?file=/step7/style.css

[leeeeup]

有支持的计划么，有些节点比较复杂，使用定位的话实现起来比较简单。

[towersxu]

你给的这个示例并没有在safari上看出什么问题，请具体描述有问题的地方或者提供对比截图。

[leeeeup]

很抱歉，我没有描述清楚。当你在拖动画布时，定位元素的位置出现了问题。示例还是之前的示例

[towersxu]

我这边并没有这个问题，看起来像是safari自身css兼容的问题，不像是LogicFlow定位的问题。建议网上找找，欢迎将找到的解决办法告知我们。

[leeeeup]

https://github.com/didi/LogicFlow/assets/103487802/44815b20-0ac7-45d4-84e4-0b24211729a1
好的，我提供了一个录屏。后续有解决办法，在此issue补充

[wangzhengbo]

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。
可以参考
https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari
bkrem/react-d3-tree#284

但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

[leeeeup]

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284

但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。
@wangzhengbo 很有帮助，解决了，谢谢

[shaohuzhang1]

这个如何解决

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284

但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

自定义节点使用了element plus的ui框架太多position: relative 你是如何解决这个问题的

[zxh666a]

这个如何解决

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284
但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

自定义节点使用了element plus的ui框架太多position: relative 你是如何解决这个问题的

请问解决了吗

[wangzhengbo]

这个如何解决

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284
但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

自定义节点使用了element plus的ui框架太多position: relative 你是如何解决这个问题的

请问解决了吗

safari本身的问题，没法修复

[qingtian5266]

这个如何解决

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284
但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

自定义节点使用了element plus的ui框架太多position: relative 你是如何解决这个问题的

请问解决了吗

safari本身的问题，没法修复

那怎么办，不让用户用 Safari ？

[shaohuzhang1]

这个问题我觉得是可以进行兼容的,希望官方能解决,不过这个issue已经被关闭了

这个如何解决

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284
但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

自定义节点使用了element plus的ui框架太多position: relative 你是如何解决这个问题的

请问解决了吗

safari本身的问题，没法修复

那怎么办，不让用户用 Safari ？

这个问题我觉得是可以进行兼容的,希望官方能解决,不过这个issue已经被关闭了

[qingtian5266]

这个问题我觉得是可以进行兼容的,希望官方能解决,不过这个issue已经被关闭了

这个如何解决

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284
但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

自定义节点使用了element plus的ui框架太多position: relative 你是如何解决这个问题的

请问解决了吗

safari本身的问题，没法修复

那怎么办，不让用户用 Safari ？

这个问题我觉得是可以进行兼容的,希望官方能解决,不过这个issue已经被关闭了

已经改业务代码了，所有自定义节点中的 position: relative 都得去掉

[zxh666a]

这个问题我觉得是可以进行兼容的,希望官方能解决,不过这个issue已经被关闭了

这个如何解决

这个问题不是LogicFlow的bug，这个是safari本身的问题。自定义节点最外层元素不能使用position: relative定位，需要使用fixed才行。 可以参考 https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari bkrem/react-d3-tree#284
但是safari目前发现有个其它的问题，就是节点的锚点是显示在节点之下的，设置zindex也无效。

自定义节点使用了element plus的ui框架太多position: relative 你是如何解决这个问题的

请问解决了吗

safari本身的问题，没法修复

那怎么办，不让用户用 Safari ？

这个问题我觉得是可以进行兼容的,希望官方能解决,不过这个issue已经被关闭了

已经改业务代码了，所有自定义节点中的 position: relative 都得去掉

这样就能解决了吗，我倒是全用的自己写的div，没有用组件库，清除relative应该比较方便。但我还没试