Css 在 StackOverflow 上搜索后缩放文本仍然模糊
Css scale text still blurry after searching on StackOverflow
URL: https://www.royalsmushicafe.dk/
我的问题是鼠标悬停时左侧菜单文本看起来很模糊。就好像在动画的时候是模糊的,只有在动画结束后才又变清晰。在 Safari 中它保持模糊。
我正在使用 Transform: scale(1.2)
和 -webkit-font-smoothing: subpixel-antialiased;
,但已经尝试了很多建议的解决方案。
我一直在浏览 Whosebug 和 Google,但没有找到建议,例如使用转换 perspective(1px)
、scale3d
、translate3d( 0, 0, 0)
、backface-visibility: hidden
甚至 filter: blur(0)
等等——没有任何结果导致鼠标悬停时清晰文本缩放的预期行为:(
如有任何帮助,我们将不胜感激
将背面可见性:隐藏;帮助?我记得有过类似的问题,它确实有帮助。
我刚刚遇到了几乎完全相同的问题,并为 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 渲染的工作方式,我并不抱太大希望。解析为干净的整数像素字体大小的缩放比率也可能会更好。
URL: https://www.royalsmushicafe.dk/
我的问题是鼠标悬停时左侧菜单文本看起来很模糊。就好像在动画的时候是模糊的,只有在动画结束后才又变清晰。在 Safari 中它保持模糊。
我正在使用 Transform: scale(1.2)
和 -webkit-font-smoothing: subpixel-antialiased;
,但已经尝试了很多建议的解决方案。
我一直在浏览 Whosebug 和 Google,但没有找到建议,例如使用转换 perspective(1px)
、scale3d
、translate3d( 0, 0, 0)
、backface-visibility: hidden
甚至 filter: blur(0)
等等——没有任何结果导致鼠标悬停时清晰文本缩放的预期行为:(
如有任何帮助,我们将不胜感激
将背面可见性:隐藏;帮助?我记得有过类似的问题,它确实有帮助。
我刚刚遇到了几乎完全相同的问题,并为 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 渲染的工作方式,我并不抱太大希望。解析为干净的整数像素字体大小的缩放比率也可能会更好。