Safari (проблемы с SVG)

[Svatov]

Столкнулся с интересной ситуацией, я конечно понимаю, что Safari поддерживает нативные градиенты через старый или новый стиль задания градиента, но мне стало интересно как он ведет себя с SVG градиентом генерируемым Colorzilla генератором.

Вот пример где все наглядно(открывать в Сафари):

ПРИМЕР

Как это объяснить я не знаю, помогите пожалуйста)

[Svatov]

Никто не сталкивался?

[SelenIT]

Colorzilla генерит следующий SVG:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#1e5799" stop-opacity="1"/>
    <stop offset="50%" stop-color="#2989d8" stop-opacity="1"/>
    <stop offset="51%" stop-color="#207cca" stop-opacity="1"/>
    <stop offset="100%" stop-color="#7db9e8" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

Вероятно, сафарёвый рендерер слишком буквально воспринимает width="1" height="1" рисуемого прямоугольника и не понимает, что его нужно растянуть/размножить на весь элемент, вот он и закрашивает только квадрат. Но добавление "background-size: 10px 100%" (вместо 10px подходит любое значение меньше фактической высоты "квадрата") вроде бы приводит его в чувство.

UPD: объяснение, похоже, неправильное — width="100" height="1" рисуется так же. Мда, загадко...