使用 2 个线性渐变的网格背景在线条中似乎没有一致的“厚度”（CSS）

Question

我使用 2 个线性渐变为一个元素制作了网格背景。然而，这些线条的粗细并不一致，在某些部分显得模糊，在其他部分非常清晰，等等 - 请参见此屏幕截图：.

背景的实际 CSS 如下所示：

background-image: linear-gradient(to right, black 1px, transparent 0%), 
linear-gradient(to bottom, black 1px, transparent 0%);
background-size: 22px 22px;
background-repeat: repeat;

JS 脚本根据可用空间自动将元素的宽度和高度缩放为 22px 的倍数。

我试着在大小和线宽方面稍微修改一下渐变，这两个都比较大，一切似乎都很好。但这不是我想要的。我也尝试使用我在 Paint3D 中制作的图像，但它没有改变任何东西。

我转向其他浏览器，不同的引擎似乎以不同的方式呈现它，但问题仍然以这种或另一种方式存在（上面的屏幕截图是FF）。看起来这是渲染本身的问题，不用说我不知道我能做什么。

提前感谢有关如何解决此问题的任何建议。