Css 仅在Windows Chrome上使用“变换比例”会导致文本模糊

关于CSS转换

scale

，我遇到了一个非常令人沮丧的问题。我有一个文本块，我想在悬停时放大105%，这会导致文本模糊，但仅在Windows版本的Chrome上。我找到并尝试了那里提供的各种解决方案，但我仍然无法让它按预期工作

body，html{
字体系列：'opensans'，Sans serif；
}
.zoom{
转变：转变；
宽度：300px；
保证金：50px自动；
}
.缩放：悬停{
变换：比例（1.05）translateZ（0）；
改变：转变；
}
.zoom h4{
字号：2rem；
线高：2.5雷姆；
-webkit字体平滑：抗锯齿；
背面可见性：隐藏；
-webkit过滤器：模糊（0）；
过滤器：模糊（0）；
保证金：0；
文本转换：大写；
}
.zoom p{
-webkit字体平滑：抗锯齿；
背面可见性：隐藏；
-webkit过滤器：模糊（0）；
过滤器：模糊（0）；
保证金：0；
}

乱数假文
我的同僚，我的同僚

我现在无法亲自测试，因为我手边没有Windows电脑，但也许您可以使用以下任一解决方案：

添加

背面可见性：隐藏到
。缩放

更改

上的
变换
。缩放：悬停

属性为

变换：缩放（1.05）translateZ（0）

---

这将触发GPU材料加速，可能会解决您在Chrome上的问题。不过，没有承诺。祝你好运

基于我发现的另一个问题，我已经尝试了

backface visibility

解决方案，但它没有解决问题。我更新了我的问题，包括

translateZ（0），但问题仍然存在。谢谢你的建议！另一个想法可能是添加
将改变：transform属性设置为
.zoom
，但我现在正在努力，哈哈。