旋转div元素引发的异常空白间隙问题求助

大家好，我最近碰到一个挺奇怪的问题：当我给div添加transform: rotate(180deg)样式后，在部分缩放级别下，相邻的黑色盒子之间会莫名其妙出现一条白色间隙。但只要把旋转样式去掉，这个问题就完全消失了。

具体情况说明： #

• 浏览器/设备表现：我在多个设备上测试过，Linux系统下的Firefox和Chrome都出现了这个问题；Windows系统的Chromium也有同样情况，但Windows的Firefox却没出现这个间隙。
• 代码还原：我做了两个示例，一个是最小复现版本，另一个是包含我实际要用的SVG的版本（因为没法加外部资源，直接把SVG嵌进HTML里了）。实际项目是用django-components写的，已经尽量还原了原场景。
• 样式需求：我明确需要用rotate(180deg)而不是scaleY(-1)，因为SVG的显示效果要求必须用旋转，不能用翻转缩放。之前试过用outline的“土办法”（比如outline-offset:-1px; outline: 2px solid #1ab2e6;），但完全没用，也没搞懂到底是哪里出了问题。

最小复现代码： #

CSS部分：

.background {
  background-color: black;
  height: 100px;
  width: 100%;
  backface-visibility: hidden;
}
.flipped {
  transform: rotate(180deg);
}
.content {
  /* 试过的无效修复 */
  /* outline-offset:-1px; */
  /* outline: 2px solid #1ab2e6; */
}

HTML部分：

<div>
  <div class="section">
    <div class="background flipped"></div>
  </div>
  <div class="content"></div>
  <div>
    <div class="section">
      <div class="background"></div>
    </div>
  </div>
</div>

问题截图说明： #

• 实际代码使用rotate(180deg)时出现间隙的截图
• 实际代码改用scaleY(-1)时正常显示的截图
• 最小复现示例出现间隙的截图
• 包含SVG的示例同样出现间隙的截图

有没有大佬遇到过类似的问题？能不能帮我分析下这个白色间隙出现的原因，以及怎么在保留rotate(180deg)的前提下解决这个问题？

内容来源于stack exchange