CSS / HTML 渐变填充模式在 Firefox 中有问题

Question

以下是一个最小的（ish）示例，其中方格渐变填充图案在 Firefox（版本 74）中出现故障，即它不是像素完美的。有线伪影。为什么是这样？那是正常的吗？除了使用图像作为背景之外，是否有修复方法？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <style>
        .r{width:20px;height:20px;background:white;float:left;}
        .w{overflow:hidden;}
        #p75{
            width:80px;
            height:20px;
            background-position:0px 0px,10px 10px;
            background-size:20px 20px;
            background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc 100%),
                linear-gradient(45deg,#ccc 25%,white 25%,white 75%,#ccc 75%,#ccc 100%);
            float:left;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="r">0</div>
        <div id="p75"></div>
    </div>
</body>

Answer 1

你可以稍微重叠它们，这里我在颜色 start/stop 设置中添加了 0.1%，chrome 曾经是那个。

  .r {
  width: 20px;
  height: 20px;
  background: white;
  float: left;
}

.w {
  overflow: hidden;
}

#p75,
.p75 {
  width: 80px;
  height: 20px;
  background-position: 0px 0px, 10px 10px;
  background-size: 20px 20px;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25.1%, transparent 75%, #ccc 75.1%, #ccc 100%), linear-gradient(45deg, #ccc 25%, white 25.1%, white 75%, #ccc 75.1%, #ccc 100%);
  float: left;
}

.p75 {
margin:0 1em 1em;
  height: 200px;
  width:100%;

  background-size: 19px 19px;

<div class="w">
  <div class="r">0</div>
  <div id="p75"></div>
</div>
<p>or decrease background-size of 1px</p>

<div class="p75"></div>

另一个解决方案是通过 css 自定义属性从三角形和预调值设置整个模式：

div {
  --bgsize: 40;
  --sq1: 0 0;
  --sq2: calc(var(--bgsize) / 2 * 1px)  calc(var(--bgsize) / 2 * 1px);
  --sq3: var(--sq2);
  --sq4: calc(var(--bgsize) * 1px ) 0px;
}

#a20:checked ~ div { --bgsize: 20; }
#a50:checked ~ div { --bgsize: 50; }
#a150:checked~ div { --bgsize: 150;}
#a100:checked~ div { --bgsize: 100;}
div { 

  height:200px;  
  background:
  linear-gradient(45deg,  gray 25% , transparent 26%),
  linear-gradient(225deg, gray 25% , transparent 26%),
  linear-gradient(45deg,  gray 25% , transparent 26%),
  linear-gradient(225deg, gray 25% , transparent 26%) 
  ;
  background-position: 
  var(--sq1) , 
  var(--sq2) , 
  var(--sq3) , 
  var(--sq4);
  background-size: calc(var(--bgsize) * 1px)  calc(var(--bgsize) * 1px );
}

reset bg-size:<br>
<label for=a20>20px</label><input  type=radio  name=test  id=a20>
<label for=a100>100px</label><input type=radio  name=test  id=a100>
<label for=a150>150px</label><input  type=radio  name=test  id=a150>
<div></div>

带有重置 --bgsize 和颜色选项的演示 https://codepen.io/gc-nomade/pen/GRJGXwv

Answer 2

旋转渐变总是有这个问题，更多关于检查这个

解决此问题的一种方法是根本不使用角度，而是使用重复渐变。

html {
  height: 100%;
  background: 
  repeating-linear-gradient(90deg, #fff 0px 10px, transparent 10px 20px), 
  repeating-linear-gradient(0deg, #000 0px 10px, #fff 10px 20px);
  background-blend-mode: difference;
}

编辑：感谢@Temani Afif 没有重复渐变。

html {
  height: 100%;
  background: 
    linear-gradient(90deg, #fff 50%, transparent 0) 0 0/20px 100%, 
    linear-gradient(0deg,  #000 50%, #fff        0) 0 0/100% 20px;
  background-blend-mode: difference;
}

CSS / HTML 渐变填充模式在 Firefox 中有问题

CSS / HTML gradient fill pattern is glitchy in Firefox

html

css

linear-gradients