最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

全球新动态：Safari浏览器对SVG中的<foreignObject>标签支持不友好，渲染容易错位

来源：博客园

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

在 Chrome 浏览器开发完成，测试上线都符合预期，但是最后收到用户反馈：她用的是 mac 自带的 Safari 浏览器，在 Safari 里markdown编辑器会出现错位等各种问题。于是我先打开我的 Firefox 浏览器，自测正常，那估计就是 Safari 浏览器的兼容问题了。我看了下 Safari 浏览器的表现：markdown 编辑器每次一打开检查本身的 dom 占位是正确的，但是可视的编辑器界面却会被渲染到最顶部 标签的左上角原点(0,0)。最后排查到是因为 safari 对 SVG 中的 标签支持不友好，渲染容易错位，特别是遇到 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链接中被很多程序员提为解决方案，确实，如果页面不复杂的情况下，会

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

关键词： 解决方案 我们需要 用户反馈