我恨 Safari(咬牙切齿)
当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug!!!还贼 tm 难调,日常安卓上和设备仿真上都是正常的 Safari 异常
我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式(在我的例子中是一个按钮)时,它会在 SVG 上绝对定位。但是当我移除 opacity 后,它就按照预期定位了。调试这个问题花了我几个小时。
尝试将您的 foreignObjects 包裹在 group 元素中。我发现使用变换样式 foreignObjects 在 Safari 中效果不佳。
Sing with me Safari is the new IE!
啊!!!破问题害我挠头了一下午。
https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari
看着像是 09 年就发现了的问题,现在也没修。
https://bugs.webkit.org/show_bug.cgi?id=23113