如何阻止 Firefox 背景 CSS 重复图像图案显示图像边缘？

Question

我正在开发一个网页，其背景是带有 1 像素 x 1 像素正方形的黑白棋盘格。 我尝试了在互联网上找到的不同 CSS 背景，但 Firefox 无法正确显示它（全屏 Firefox，2560x1440）。背景在整个屏幕宽度的图案中显示出可见的裂缝。所以我决定远离 CSS 渐变并使用旧方法。简单的 GIF 图像 10x10px，其中有棋盘格，重复。同样，Chrome 显示正确，但 Firefox 显示类似这样的内容（请放大）：

我可以做什么来解决这个问题？我尝试了不同的背景混合模式但无济于事，我没有其他想法。啊，它是 React，所以我尝试使用 .local.env 变量来禁用小于 10kB 的内联图像，这也没有帮助。

背景图片：

代码：

.desktop-background {
  height: 100%;
  background-image: url('/assets/background32.png');
  background-repeat: repeat;
}

<div class="desktop-background"></div>

Answer 1

*{
  margin: 0;
  padding: 0;
}

.desktop-background {
  height: 100vh;
  background-image: url('https://i.stack.imgur.com/0gWf9.png');
  background-repeat: repeat;
}

<div class="desktop-background"></div>