svg中的foreignObject中进行相对定位(position:relative)会有问题

[ckinmind]

在做可视化大屏的时候会使用foreignObject中去写div结构, 之前在里面写一个switch按钮，这个按钮用了相对定位样式，然后发现这个switch按钮怎么也出不来，查了下发现这肯定是webkit内核浏览器的bug，好像还没发解决

参考资料：

• SVG foreignObject and absolute positioning
• SVG foreignObject behaves as though absolutely positioned in Webkit browsers

找到一种解决方案

将relative定位改为fixed定位 补充：上面这种方法不行，一旦开始运动整个switch组件样式都崩坏了

[JamesTing]

这个bug，Safari至今都没有解决🤷‍♂️