如何在 Firefox 中使用带有点值的背景大小答案

【问题标题】：how to use background-size with point values in Firefox如何在 Firefox 中使用带有点值的背景大小
【发布时间】：2021-02-20 00:22:30
【问题描述】：

我正在使用这个 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 Grid Layout 中的值，我计算映射的图块（长度和宽度），结果是一个点值。我将此长度和宽度与背景大小一起使用，以直观地显示正确的图块大小。

background-size: 12.4016px 12px;

使用 Google Chrome，这不是问题，并且可以正确表示底层网格。在 Firefox 下，磁贴是扭曲的。有解决办法吗？

【问题讨论】：

图块没有变形但画得很差，不知何故 FF 不均匀地舍入屏幕上的重复渐变。增加渐变的原始大小应该会有所帮助，但不会那么锐利。

标签： css google-chrome firefox

【解决方案1】：

尝试一个略大于1px的值

html {
  background: 
    linear-gradient(  0deg, rgba(0, 0, 0, 0.1) 1.3px, transparent 0), 
    linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1.3px, transparent 0);
  background-size: 12.4016px 12px;
}

【讨论】：

【解决方案2】：

与@termaniAfif 类似的方法

你可能会增加你的重复渐变大小，所以在 (mysterious ;) ) 渲染计算是通过 background-size 进行之后，FF 仍然有一些东西要显示。

html {
  min-height: 100vh;
  background-color: white;
  background-image: 
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 2px, transparent 30px), 
      repeating-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 2px, transparent 30px);
  background-size: 12.4016px 12px;
}

repeating-gradient increased from 20px to 30px

【讨论】：