Chrome浏览器SVG渲染异常是否为浏览器Bug？

Chrome更新至最新版本后，网站SVG元素出现以下问题：

• 特定屏幕尺寸下缩放异常
• 调整窗口时SVG会闪烁

经测试，该问题与屏幕宽度相关，使用auto尺寸（含隐式自动尺寸）或vw单位时会触发。

基础复现代码 #

CSS #

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

.svg-element {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto; /* 用`10vw`也会触发问题，`10px`则不会 */
    fill: darkgrey;
}

HTML #

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none" class="svg-element">
        <rect x="0" y="0" width="100" height="10"/>
    </svg>
</div>

尽管代码已极简，仍尝试过调整SVG的viewBox、preserveAspectRatio属性，以及object-fit、aspect-ratio等各类CSS属性，但问题仍未解决。此前版本的Chrome中功能正常，目前Edge、Vivaldi及Firefox浏览器均无此问题。

请问这是Chrome的Bug，还是我的实现存在问题？是否有可行的解决方案？目前发现使用px等绝对单位可解决问题，但希望SVG元素高度能自动适配。

补充测试结果 #

进一步测试发现，当SVG元素设置绝对宽度且高度为auto时，在特定宽度区间也会触发该问题，以下是复现代码：

CSS #

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

.svg-element {
    display: block;
    box-sizing: border-box;
    width: 304px; /* 301px至304px区间内会触发问题 */
    height: auto;
    fill: darkgrey;
}

HTML #

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none" class="svg-element">
        <rect x="0" y="0" width="100" height="10"/>
    </svg>
</div>

Chrome开发者工具显示SVG元素尺寸计算正确，但渲染出的SVG未按预期填充元素尺寸。

内容的提问来源于stack exchange，提问作者Unknown Coder