Изображения Mac OS Safari 12 с svg-источником с полосами прокрутки

Question

Странная проблема, с которой мы столкнулись, когда некоторые изображения SVG отображают полосы прокрутки.Вы не можете взаимодействовать со свитком, они почти являются частью изображения.Кто-нибудь сталкивался с этим раньше или есть идеи?Изображение имеет круглую высоту и ширину, бывает только на определенных машинах.У меня есть 2 macbooks, работающие на высоких версиях 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

Это, вероятно, действительно ошибка (я мог воспроизвести, переключив системную настройку на Показать полосы прокрутки: всегда в MacOs Safari12.0 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.