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

【问题标题】：Mac OS Safari 12 images with svg source displaying scrollbars带有显示滚动条的 svg 源的 Mac OS Safari 12 图像
【发布时间】：2019-03-08 12:12:14
【问题描述】：

我们遇到了一些 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"" />

【问题讨论】：

您需要提供minimal reproducible example，以便我们自行复制。另外，您可以查看webkit's bugzilla，如果他们已经报告过类似的情况，如果没有，请提交新报告。
@Kaiido 添加了一个示例。谢谢
所以，这可能确实是一个错误（我可以在将系统偏好切换为显示滚动条时进行复制：始终在 Safari12.0 macOs 10.12 上）。但在他们的辩护中，你的根节点上有一个overflow="scroll" 属性。您对此有何期待？（无法在没有此属性的其他 svg 上进行复制，因此只需将其删除即可解决您的问题）。
@Kaiido 我没有向任何东西添加溢出滚动。那个 codepen 例子只是为了展示它发生的一个例子。我已经提交了一个错误报告。谢谢
是的，你的linked svg image 有这个属性。查看来源：<svg xmlns="http://www.w3.org/2000/svg" width="181.6" height="27.1" viewBox="0 0 181.6 27.1" overflow="scroll"><style>...

标签： html css macos svg safari

【解决方案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}

&lt;img id="buggy"&gt;&lt;img id="fixed"&gt;

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

【讨论】：

谢谢，这已经排序了。认为溢出滚动来自插画家出口。谢谢