Css 如何在Firefox中使用背景大小和点值

我使用这个CSS背景图像在我的DIV上显示一个平铺图案

background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 20px);

在后台，使用一个框架（react grid layout）相应地映射这些分幅。根据React网格布局中的值，我计算映射的平铺（长度和宽度），结果是一个点值。此长度和宽度与背景大小一起使用，以直观方式显示正确的瓷砖大小

background-size: 12.4016px 12px;

---

使用Google Chrome，这不是一个问题，可以正确地表示底层网格。在Firefox下，瓷砖是扭曲的。有解决方法吗？

尝试一个略大于1px的值

html{
背景：
线性梯度（0度，rgba（0,0,0,0.1）1.3px，透明0），
线性梯度（-90度，rgba（0,0,0,0.1）1.3px，透明0）；
背景尺寸：12.4016px 12px；
}

与@termaniAfif类似的方法

您可以增加重复渐变大小，以便在通过背景大小进行（神秘；）渲染计算后，FF仍有一些内容要显示

html{
最小高度：100vh；
背景色：白色；
背景图像：
重复线性渐变（0deg，rgba（0,0,0,0.1），rgba（0,0,0,0.1）1px，透明2px，透明30px），
重复线性梯度（-90度，rgba（0,0,0,0.1），rgba（0,0,0,0.1）1px，透明2px，透明30px）；
背景尺寸：12.4016px 12px；
}

---

重复渐变从20px增加到30px

瓷砖没有变形，但绘制不好，不知何故FF在屏幕上不均匀地舍入重复渐变。增加渐变的原始大小应该会有所帮助，但不会太尖锐。