线性渐变渲染问题Firefox

Question

我正在尝试绘制各种大小的多个网格，但是Firefox存在问题-linear-gradient在许多地方对我来说都是分手的。

它在提供任何单位（px / mm /％/四舍五入/浮点数）的Google 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

重复的渐变应该会带来更好的结果，但是对于诸如1px这样的带有渐变的小值，总是很棘手

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>

您还可以在此处考虑SVG（调整viewBox，宽度和高度或矩形，直到获得良好结果为止）

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'> <rect x='0' y='0' width='1' height='100%' /> <rect x='0' y='0' width='100%' height='1'/></svg>")
    0 0/5mm 5mm;
}

<div></div>

也只有SVG，如下所示：

svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect x='0' y='0' width='1' height='100%' /> 
      <rect x='0' y='0' width='100%' height='1'/>
    </pattern>
  </defs>
  <rect width="3000" height="3000" fill="url(#grid)" />
</svg>