Html 缩放悬停按钮上的元素会导致文本模糊

我有一个模式，当我在按钮上悬停时，它会对按钮的文本产生模糊效果

我试过-webkit字体平滑：亚像素抗锯齿；我尝试了背面可见性隐藏，透视图（1px），但似乎都不起作用

.overlay{
高度：100vh；
宽度：100%；
位置：固定；
排名：0；
左：0；
背景色：rgba（50,65,97,0.5）；
z指数：9999；
不透明度：0；
可见性：隐藏；
转换：all.3s；}
.覆盖。取消{
位置：绝对位置；
宽度：100%；
身高：100%；
游标：默认值；}
.覆盖内容{
位置：绝对位置；
最高：44%；
左：55.5%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
填充：24px；
宽度：460px；
背景色：#ffffff；
盒影：02rem4remrgba（81136255,0.2）；
边界半径：8px；
显示：表格；
溢出：隐藏；
不透明度：0；
转换：转换（-50%，-50%）比例（0.25）；
背面可见性：隐藏；
转换：all.4s.2s；}
.显示模态{
不透明度：1；
可见性：可见；}
.显示模式.覆盖内容{
将改变：自动；
不透明度：1；
转换：转换（-50%，-50%）比例（1）；
背面可见性：隐藏；}
.标题小学{
颜色：#ff6f6c；
字号：2rem；
保证金底部：2.4rem；
字体大小：粗体；}
.表格标签{
字体大小：1.4rem；
颜色：#324161；
显示：表头组；
过渡：所有0.3秒缓解；
显示：内联块；
页边距底部：4px；}
.btn组{
浮动：对；
显示：内联flex；
垂直对齐：中间；}
.btn组>.btn{
位置：相对位置；
-webkit-box-flex:0；
-webkit flex:0 1自动；
-ms-flex:01自动；
flex:01自动；
最小宽度：16rem；
宽度：自动；}
.btn、.btn:链接、.btn:已访问{
文本转换：大写；
文字装饰：无；
填充：1雷姆1.6雷姆；
显示：内联块；
边界半径：4px；
过渡：all.2s；
位置：相对位置；
字体大小：1.4rem；
字体：正常1.4rem“Nunito”；
宽度：100%；
边界：无；
光标：指针；
边缘顶部：4rem；
文本对齐：居中；
字体系列：继承；}
.btn:悬停{
转换：translateY（-1.5px）；
长方体阴影：0 1rem 2rem rgba（81136255,0.1）；}
.btn:悬停：：之后{
不透明度：0；}
.btn：：之后{
内容：“；
显示：内联块；
身高：100%；
宽度：100%；
边界半径：8rem；
位置：绝对位置；
排名：0；
左：0；
z指数：-1；
转换：all.4s；}
.btn:活动，.btn:焦点{
大纲：无；
转换：translateY（-1px）；
长方体阴影：0.5rem 1rem rgba（81136255,0.1）；}
.btn—主要{
背景色：#5188ff；
颜色：#ffffff；
字体大小：粗体；
字体系列：继承；}
.btn--主：之后{
背景色：#5188ff；}

删除用户
是否确实要删除用户John Doe？
取消
删除

这就是你的罪魁祸首：

transform:translateY（-1.5px）。使用整数像素值，如
-2
，而不是
-1.5
，您的问题就会消失。可能的重复：