Это ошибка рендеринга SVG Chrome? ⇐ Html

[Anonymous]

У меня начались проблемы с элементами SVG на моем веб-сайте, начиная с последних версий Chrome. Кажется, что SVG не масштабируется правильно при определенных размерах экрана и мерцает при изменении размера окна. В моем тестировании это, похоже, связано с шириной экрана и происходит, если я использую автоматические размеры (включая неявное автоматическое изменение размера) или единицы измерения vw.
Здесь — это фрагмент, воспроизводящий ошибку:

Код: Выделить всё

.container {
display: block;
width: 100%;
border: 1px solid red;
}

.svg-element {
display: block;
box-sizing: border-box;
width: 100%;
height: auto; /* Also happens with `10vw`, but not with `10px` */
fill: darkgrey;
}

Код: Выделить всё

Хотя приведенный выше фрагмент содержит лишь минимальный код, я попробовал поиграться с SVG, область просмотра и атрибут saveAspectRatio, а также все виды свойств CSS, включая соответствие объекта, соотношение сторон и многие другие.
До последних версий Chrome всё работало хорошо, не знаю именно что. На данный момент этого не происходит ни в Edge, ни в Vivaldi. В Firefox этого также не происходит.
Это ошибка Chrome или я делаю что-то не так? Кроме того, есть ли обходной путь? Я заметил, что указание абсолютных размеров (например, в пикселях вместо vw) исправляет это, но мне бы хотелось, чтобы высота моего SVG-элемента определялась автоматически.

Подробнее здесь: https://stackoverflow.com/questions/793 ... render-bug