CSS / HTML 渐变填充模式在 Firefox 中出现故障答案

【问题标题】：CSS / HTML gradient fill pattern is glitchy in FirefoxCSS / HTML 渐变填充模式在 Firefox 中出现故障
【发布时间】：2020-06-29 20:08:32
【问题描述】：

以下是一个最小（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>

【问题讨论】：

相关：stackoverflow.com/a/55455760/8620333 .. 在不久的将来你可以依赖 coninc-gradient 但实际上我建议使用 SVG 方法

标签： html css linear-gradients

【解决方案1】：

旋转渐变一直存在这个问题，请查看question

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

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;
}

【讨论】：

混合模式仅适用于渐变：jsfiddle.net/wbg691z2
你也不需要定义大小，因为它是一个重复的渐变：jsfiddle.net/wbg691z2/1
@TemaniAfif 很奇怪，我尝试了很多次，我什至查了一下，发现了一个answer
@TemaniAfif 是的，在大声笑之前我从未使用过重复渐变，感谢您的提醒，非常感谢 =)
如果你对非重复渐变做同样的事情，你将需要大小：jsfiddle.net/wbg691z2/2 ;)

【解决方案2】：

你可以把它们重叠一点，这里我在颜色开始/停止设置中添加了 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 自定义属性从三角形和 pretune 值设置整个模式：

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>

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

【讨论】：

为什么不用--bgsize 以px 为单位，避免1px 之后的额外乘法？
@TemaniAfif 因为你可能想在最后使用 % 或单位；），我也应该把单位放在 var 中。保重。
啊，不，它不适用于百分比，因为您将陷入与像素一不同的百分比行为：jsfiddle.net/wbg691z2/3 .. 您将需要更复杂的（可能是不可能的） ) 代码
@TemaniAfif 将 % 转换为 vw/vh/vmin 或 vmax 并且它很好 ;) ，我评论得太快了，但这就是想法 ;)