Это ошибка рендеринга 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-элемента определялась автоматически.

Изменить
Поигравшись еще немного, я обнаружил, что это также происходит, когда элемент SVG имеет абсолютную ширину и автоматическую высоту в определенной ширины. Следующий фрагмент демонстрирует это:

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

.container {
display: block;
width: min-content;
border: 1px solid red;
}

.svg-element {
display: block;
box-sizing: border-box;
width: 304px; /* Between 301px and 304px, the issue occurs */
height: auto; /* Setting an absolute width fixes the issue */
fill: darkgrey;
}

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

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

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