Safari浏览器对SVG中的<foreignObject>标签支持不友好,渲染容易错位

  在 svg 中需要写一个 markdown 编辑器,需要用到 <foreignObject> 绘制来html,编辑器选择了 simplemde。大致html部分结构如下,<markdown-editor> 组件为定制封装好的 simplemde 编辑器。

<template>
  <svg>
    <g>
      <foreignObject :width="XXX" :height="XXX">
        <div xmlns="http://www.w3.org/1999/xhtml">
          <markdown-editor></markdown-editor>
        </div>
      </foreignObject>
    </g>
  </svg>
</template>

  在 Chrome 浏览器开发完成,测试上线都符合预期,但是最后收到用户反馈:她用的是 mac 自带的 Safari 浏览器,在 Safari 里markdown编辑器会出现错位等各种问题。于是我先打开我的 Firefox 浏览器,自测正常,那估计就是 Safari 浏览器的兼容问题了。我看了下 Safari 浏览器的表现:markdown 编辑器每次一打开检查本身的 dom 占位是正确的,但是可视的编辑器界面却会被渲染到最顶部 <svg> 标签的左上角原点(0,0)。最后排查到是因为 safari 对 SVG 中的 <foreignObject> 标签支持不友好,渲染容易错位,特别是遇到 position 属性的时候,而我在引入simplemde 编辑器的同时也引入了 simplemde.min.css,其中大量使用了 position 属性我也在 StackOverflow 和 Github 找到了几篇关于这个bug的讨论帖作为参考:

  StackOverflow:SVG foreignObject not working properly on Safari

  Github:Safari + foreignobject render issue

  最后Github一位程序员ankero一锤定音,原文大意如下:

    这不是一个问题,但是可以添加到 README 中。我将在这里添加它,以便如果有人面临类似的问题,可以在这个仓库中找到一个解决方案。在使用这个库(指的是react-d3-tree库,但是遇到的问题是一样的)进行开发时,如果使用 foreignObject 呈现节点,请检查它在 Safari (Mac + iOS)中的显示方式。我们遇到了一个问题,节点内容呈现为父 SVG 的坐标0,0(左上角)。这是由于 Safari 中的一个 bug,它影响 foreignObject 根据顶部 SVG 而不是 foreignObject 本身计算呈现位置。通过检查节点并查看基于浏览器的节点是否在应该在的位置,您可以非常清楚地看到这种效果,但是呈现在了错误的位置。(这段描述和我当时排查的结果一模一样)

    那么,如果你看到这个问题,解决方案是什么?

    据我所知,如果您使用以下任何 CSS 选项,dom 元素将呈现在错误的位置。所以解决办法就是不要用这些。对我们来说,我们需要检查浏览器是否是 Safari,然后删除一些需要一个或多个这样的样式的功能。

      所以不要在 Safari + foreignObject 中使用以下样式:

        • position(您可以使用 position: fixed,但这将导致溢出问题)
        • webkit-transform-style
        • webkit-backface-visibility
        • transition
        • transform

    如何检测 Safari?

    我们使用以下片段:

export const IS_SAFARI = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

  这里提一下 position: fixed 导致的溢出问题,这个在上一个StackOverflow链接中被很多程序员提为解决方案,这个办法确实能解决一些简单的需求和页面,但是需要注意的一点是,使用这种办法会导致两个问题:1是页面元素的溢出效果,会发现原本svg元素所占的整体画布位置比原先设计的整体画布偏大一点,导致页面溢出,超过媒体可视高度会出现滚动条;2是页面缩放会出现问题,具体来说就是svg所绘制元素的缩放比例与<foreignObject>所绘制元素的缩放比例不是一致的,这也会带来位置错乱问题。不过可以根据自己的具体情况进行抉择,最后决定是否采用这种方案。

  各大浏览器之间的兼容问题是各位前端er心中永远的痛,一方面希望谷歌或火狐浏览器能一统江湖,但是另一方面又希望百家齐放能促进前端技术的发展。但是话说又说回来,最重要的还是遵守标准,既然标准都设立在那了,为啥各家不跟上标准呢。

posted @ 2022-12-25 21:11  他好像一条狗啊  阅读(1226)  评论(0编辑  收藏  举报