html - Mac OS Safari 12 图像与 svg 源显示滚动​​条

Question

我们遇到了一些 svg 图像显示滚动条的奇怪问题。你不能与卷轴互动，它们几乎是图像的一部分。以前有人遇到过这个或有任何想法吗？图像具有圆形的高度和宽度，只发生在某些机器上。有 2 台 macbook，都运行 high sierra 和 Safari 12，只发生在 1 台上。如果你放大页面，实际的滚动条也会放大，所以它几乎就像滚动是图像的一部分。

您可以在此处查看示例:https://codepen.io/anon/pen/WarMLp

<img src="http://www.boxmodeldigital.com/Assets/images/logos/main__logo.svg" alt"" />

Answer 1

这可能确实是一个错误(在 Safari12.0 macOs 10.12 上将系统首选项切换为 显示滚动条:始终 时我可以重现)。

但在他们的辩护中，您的根节点上有一个 overflow="scroll" 属性。只需将其删除即可解决您的问题:

var source = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" overflow="scroll">
  <rect x="0" y="0" width="100" height="100" rx="15" ry="15" />
</svg>`

buggy.src = URL.createObjectURL(new Blob([source], {type: 'image/svg+xml'}));
// remove the attribute
source = source.replace(' overflow="scroll"', '');
fixed.src = URL.createObjectURL(new Blob([source], {type: 'image/svg+xml'}));

img{width:calc(50vmin - 4px); margin: 1px}

<img id="buggy"><img id="fixed">

---

---

这是 StackSnippet 在我的 Safari 12.0 上的结果截图。