仅安卓Chrome近期出现SVG图像尺寸布局异常问题求助

更新说明 #

已将问题简化至测试页面，安卓Chrome浏览器中第二个SVG被错误放置到下方，其他浏览器显示正常。

问题详情 #

HTML页面加载50x50px的SVG方格网格，在桌面Chrome设备工具栏模拟、安卓Brave浏览器等测试环境均显示正常，仅安卓Chrome出现异常，且该问题近1个月左右才出现。

环境信息 #

• 页面地址：https://doontoon.com/fun.php
• Android版本：13
• Android Chrome版本：114.0.5735.130

附正常显示截图与安卓Chrome异常显示截图，相关代码如下：

相关CSS代码 #

:root {
    --width: 500px;
    --height: 600px;
}
* {
    margin: 0;
    padding: 0;
}
body {
    width: 600px;
    margin: auto;
}
#maze {
    border: 2px solid #037C73;
    border-radius: 2px;
    width: var(--width);
    height: var(--height);
    margin: auto;
    padding: 0;
}
.rows {
    height: 50px;
}

相关SVG代码 #

<svg
   width="50"
   height="50"
   viewBox="0 0 5.2916665 5.2916668"
</svg>

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