Safari 不尊重 CSS 过滤器中的小数：blur()答案

【问题标题】：Safari is not respecting decimals in CSS filter: blur()Safari 不尊重 CSS 过滤器中的小数：blur()
【发布时间】：2021-08-23 21:47:44
【问题描述】：

我需要在我的文本上使用细微的模糊，所以我使用了 0.6 像素的模糊滤镜。 Firefox 和 Chrome 似乎可以很好地处理像素的小数部分（小数）：

但是，Safari（14.0 和更高版本）不考虑像素的小数部分。一切都被四舍五入到最接近的整数。

您可以在下面看到这些屏幕截图的现场演示。如果你用 Chrome 和 Firefox 访问，你会看到亚像素模糊，但 Safari 会一直跳到 1px，它不会在两者之间做任何分数：

div {
  margin-bottom: 10px;
}
.blur1 {
  filter: blur(1px);
}
.blur2 {
  filter: blur(0.6px);
}
.blur3 {
  filter: blur(0.001px);
}

<div class="blur1">Hello 1px</div>
<div class="blur2">Hello 0.6px</div>
<div class="blur3">Hello 0.001px</div>

有没有办法解决这个问题，或者规避这个错误？如何让我的文本在 Safari MacOS 和 iOS 中模糊一小部分像素？

【问题讨论】：

我知道 safari 也不能很好地处理行高。

标签： css filter safari

【解决方案1】：

结合使用缩放和字体大小设置，可以使 Safari 看起来像是在“部分地”模糊 - 看起来很高兴部分地缩放但不是部分地模糊。

这个 sn-p 设置与所需模糊成反比的字体大小，将模糊保持在 1px，然后按所需模糊的比例缩小：

div {
  margin: 0;
}

.blur:nth-child(1) {
  --b: 1;
}

.blur:nth-child(2) {
  --b: 0.6;
}

.blur:nth-child(3) {
  --b: 0.1;
}

.blur:nth-child(4) {
  --b: 0.01;
}

.blur:nth-child(5) {
  --b: 0.001;
}

.blur {
  font-size: calc(1em / var(--b));
  line-height: calc(1.4em * var(--b));
  filter: blur(1px);
  width: calc(100% / var(--b));
  transform: scale(var(--b));
  transform-origin: 0 0;
}

<div>
  <div class="blur">Hello 1px</div>
  <div class="blur">Hello 0.6px</div>
  <div class="blur">Hello 0.1px</div>
  <div class="blur">Hello 0.01px</div>
  <div class="blur">Hello 0.001px</div>
</div>

在 Safari iPadIOS 14 上测试，这似乎有效。然而，在 Windows 10 Edge/Chrome 0.01 和 0.001 之间的某个地方，字体大小无法正常工作，因此这不是一个通用的解决方案，但也许了解各种 CSS 实现中准确性限制的人可以更进一步。

【讨论】：