是什么导致Chrome在边界之间散发差距？

Question

在Chrome中，在Firefox中不存在的边界之间有红线（从背景颜色）。

chrome vs firefox

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  background: red;
  color: #ccc;
  font-family: Roboto, Garuda;
  border: 12px solid seagreen;
}

header {
  display: flex;
  flex-direction: row;
  border: 8px solid mediumpurple;
}

header #logo {
  flex-grow: 0;
  flex-basis: auto;
  border: 8px solid gold;
}

header nav {
  flex-grow: 1;
  flex-basis: auto;
  border: 8px solid mediumspringgreen;
}

main {
  display: flex;
  flex-direction: row-reverse;
  flex-grow: 1;
  border: 8px solid greenyellow;
}

main article {
  flex-grow: 1;
  flex-basis: auto;
  border: 8px solid salmon;
}

main aside {
  border: 8px solid violet;
}

footer {
  border: 8px solid hotpink;
}

<header>
  <div id="logo">Header</div>
  <nav>Navigation</nav>
</header>
<main>
  <article>
    <h1>Header 1</h1>
    <p>Paragraph text <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
  </article>
  <aside>Sidebar</aside>
</main>
<footer>Footer
</footer>

我认为CSS会阻止这种情况的发生：

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
}

我还没有找到解释为什么这些差距被呈现出来，并且我怀疑我没有搜索正确的关键字。您知道为什么在基于铬的浏览器中会发生这种情况还是什么解决方案？

更新： 在Ubuntu 22.04和Windows 11中的Chrome上，它显示了边界之间的差距，但是Fedora 36上的Chrome却不是。所有浏览器版本均为103.0.5060.114，不启用扩展名，并且处于100％缩放。我可以测试的是什么来找出可能导致这种行为的原因？