Safari 不考虑 CSS 过滤器中的小数：blur()

Question

我需要在我的文字上使用微妙的模糊，所以我使用了 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 中模糊像素的一小部分？

Answer 1

结合使用缩放和字体大小设置，可以使 Safari 看起来好像在模糊 'fractionally' - 看起来很高兴按比例缩放但不按比例模糊。

此代码段将字体大小设置为与所需模糊成反比，将模糊保持在 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 实施中的准确性限制可以更进一步。

Safari 不考虑 CSS 过滤器中的小数：blur()

Safari is not respecting decimals in CSS filter: blur()

css

safari

filter