在 StackOverflow 上搜索后，CSS 缩放文本仍然模糊

Question

网址:https://www.royalsmushicafe.dk/

我的问题是鼠标悬停时左侧菜单文本看起来很模糊。就好像在动画的时候是模糊的，只有在动画结束之后才又变清晰。在 Safari 中它保持模糊。

我正在使用 Transform: scale(1.2) 和 -webkit-font-smoothing: subpixel-antialiased;，但已经尝试了很多建议的解决方案。

我一直在浏览 StackOverflow 和 Google，但没有成功，建议使用 transform perspective(1px)、scale3d、translate3d( 0, 0, 0 )、backface-visibility: hidden 甚至 filter: blur(0) 等等 – 鼠标悬停时没有任何结果导致清晰文本缩放的预期行为: (

如有任何帮助，我们将不胜感激

Answer 1

我刚刚遇到了几乎完全相同的问题，并为 perspective(1px) 找到了所有相同的黑客想法。 , backface-visibility: hidden , 依此类推，但没有成功。 Chrome 和 Firefox 都很好，但在 Safari 中放大的文本非常模糊。对于遇到这种情况的任何其他人，创可贴解决方案是缩小而不是扩大规模。

在我的例子中，我有一个标签，当输入有内容时，它会移动和改变比例:

label {
  will-change: transform, color;
  transform: translate3d(0,0,0);
  transform-origin: top left;
  height: 20px;
}

input:placeholder-shown:not(:focus) + label {
  transform: translate3d(0,.6rem,0) scale3d(1.5,1.5,1);
}

^{这里的想法是，如果输入有焦点或有内容，标签具有相同的样式，如果输入为空且没有焦点，则标签更大(因此是时髦的伪类选择器。)}

问题是使用 transform像这样在 <label> 上触发 GPU 合成.发生这种情况时，合成层在 GPU 中呈现为位图，尺寸为 CSS 布局期间计算的尺寸(此处为 20 像素)。然后，GPU 层被放大(在本例中放大了 1.5 倍，所以它现在高 30 像素，并且模糊)。

Chrome 和 Firefox 似乎会以最终比例重新渲染图层，从而消除模糊。 Safari 不会，可能是为了节省内存，因为合成层的尺寸更小(20 像素高而不是 30 像素)。

为了让它更好地工作，我选择缩小规模:

label {
  will-change: transform, color;
  /* reverse the scaling ratio */
  transform: translate3d(0,0,0) scale3d(0.67, 0.67, 1);
  transform-origin: top left;
  height: 20px;
}

input:placeholder-shown:not(:focus) + label {
  /* reset to scale of 1 */
  transform: translate3d(0,.6rem,0) scale3d(1,1,1);
}

按比例缩小的文字有点模糊，但不那么明显。我可能会尝试不同的 -webkit-font-smoothing值，尽管由于 GPU 渲染的工作方式，我不抱太大希望。解析为干净的整数像素字体大小的缩放比率也可能会更好。