线性渐变渲染问题Firefox

Question

我正在尝试绘制各种大小的多个网格，但是Firefox存在问题-线性渐变在许多地方对我来说都是不合时宜的。使用提供的任何单位（px / mm /％/四舍五入/浮动），它在chrome上都可以正常工作，但在Firefox上却做了一些有趣的事情。我曾尝试使用其他单位/四舍五入/前缀/ 3d hacks，但这些都不起作用。

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, transparent 1px);
  background-size: 5mm 5mm;
}

<div></div>

Answer 1

重复的梯度应该会产生更好的结果：

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: 
    repeating-linear-gradient(to right, black  0 1px, transparent 0 5mm),
    repeating-linear-gradient(to bottom, black 0 1px, transparent 0 5mm);
}

<div></div>