Chrome/Opera的outset box-shadow圆角渲染异常问题求助

Chrome和Opera在渲染非inset（外部）box-shadow的圆角半径时存在渲染错误，Firefox与Safari则能正确渲染。

举个例子，以下代码：

div {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px red;
}

按照计算，元素的外部圆角半径应为 2px + 5px = 7px，Firefox和Safari能正确渲染出7px的圆角，但Chrome/Opera渲染的外部圆角半径仅为6px，不符合预期。

浏览器渲染对比 #

Firefox/Safari	Chrome/Opera

复现代码 #

CSS 代码 #

div {position: absolute;}
#dm {top: 40px; left: 40px; transform: scale(6);}
#d1 {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px red;
}
#d2 {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  box-shadow: 0 0 0 5px #00fa inset;
  margin: -5px;
}

HTML 代码 #

<div id="dm">
  <div id="d1"></div>
  <div id="d2"></div>
</div>

测试设备：M1 Mac

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