带有svg源的Mac OS Safari 12图像显示滚动条

Question

奇怪的问题，我们遇到了一些SVG图片显示滚动条的地方。您无法与滚动互动，它们几乎是图像的一部分。有人以前遇到过这个问题或有任何想法吗？ 该图像的高度和宽度是圆形的，仅在某些计算机上发生。有2台Macbook都运行高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">

---

---

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