网址：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) 等等 - 没有任何结果导致预期的行为鼠标悬停时清晰的文本缩放:(
任何帮助将不胜感激
【问题讨论】：
标签： css text rendering transform blur
我刚刚遇到了几乎完全相同的问题，并为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 渲染的工作方式，我并不抱太大希望。解析为干净的整数像素字体大小的缩放比例也可能会更好。
【讨论】：
would backface-visibility: hidden;帮助？我记得有类似的问题，它确实有帮助。
【讨论】：