在StackOverflow上搜索后，Css比例文本仍然模糊

Question

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

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

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

我一直在浏览StackOverflow和谷歌，但运气不佳，建议使用转换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布局期间计算的尺寸(此处为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

将背面可见性：隐藏；帮助我记得我也遇到过类似的问题，这确实有所帮助。