Question

URL：https://www.royalsmushicafe.dk/

鼠标悬停时左侧菜单文本看起来模糊，我遇到了问题。好像在动画过程中是模糊的，并且只有在动画结束之后才再次变得清晰。在Safari中，它保持模糊状态。

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

我一直在浏览StackOverflow和Google时运气不佳，并提出了一些建议，例如使用转换perspective(1px)，scale3d，translate3d( 0, 0, 0)，backface-visibility: hidden甚至filter: blur(0)等–没有任何结果会导致鼠标悬停时出现清晰文本缩放的预期行为：（

任何帮助将不胜感激

Answer 1

我刚刚遇到了几乎完全相同的问题，并为 perspective(1px)、backface-visibility: hidden 等找到了所有相同的 hack 想法，但没有成功。 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 布局期间计算的尺寸（此处为 20px）。然后，将 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 渲染的工作方式，我并不抱太大希望。解析为干净的整数像素字体大小的缩放比例也可能会更好。

Answer 2

背面是否可见：隐藏；救命？我记得有类似的问题，但确实有帮助。

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

2 个答案: