Firefox中缩放比例过小时outline无法正常渲染的问题求助

问题现象 #

• 对元素应用transform:scale()时，当缩放比例大于0.5，outline（或border、box-shadow: 0 0 0 1px black;）能正常显示；
• 缩放比例小于0.5时，这些边框类样式完全消失；
• 缩放比例恰好等于0.5时，仅右侧和底部的轮廓可见；
• 该异常仅出现在Firefox浏览器中，Chrome等其他浏览器表现正常。

补充说明 #

若元素基础尺寸较小且缩放比例始终大于1，则不会出现此问题。

效果对比 #

复现代码 #

CSS代码

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.rect {
  width: 100px;
  height: 100px;
  background: #D3D3D3;
  outline: 1px solid black;
}

.label {
  font-size: 0.7rem;
  font-family: monospace;
}

HTML代码

<div class="tile"><div class="rect" style="transform:scale(0.48)"></div><span class="label">0.48</span></div>

<div class="tile"><div class="rect" style="transform:scale(0.5)"></div><span class="label">0.50</span></div>

<div class="tile"><div class="rect" style="transform:scale(0.52)"></div><span class="label">0.52</span></div>

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