Css 使用“变换比例”时文本不稳定

我正在尝试缩放悬停按钮的大小，但完成后，文本看起来不稳定。我查看了一些其他帖子，并尝试了一些建议，例如使用

-webkit backface visibility:hidden，
转换：translateZ（0）
和
-webkit转换样式：preserve-3d，但似乎都不起作用

这是小提琴：

（我正在使用Firefox，如果这有什么不同的话）

我在调整页面大小以测试响应性时也注意到了同样的问题。文本和一些图像变得模糊。据我所知，没有办法解决这个问题，因为字体正在调整。它不是为字体大小的每个像素设置动画，而是在动画之间。正因为如此，动画的每一秒看起来都不清晰。
背面可见性：隐藏让情况变得更好，但是文本呈现仍然很奇怪（Firefox上很脆，Chrome上很模糊）。这个问题变得更小了（主要是在镀铬上），取而代之的是去除填充物并使用更大的线条高度：


。按钮{
背景：番茄；
宽度：100px；
-webkit转换：0.3s易入易出；
-moz转换：0.3s易入易出；
-o型过渡：0.3s缓进-缓出；
过渡：0.3s缓进缓出；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
文本对齐：居中；
线高：1.8em；
}
.按钮：悬停{
-webkit转换：比例（1.25）；
-莫兹变换：比例（1.25）；
-o变换：标度（1.25）；
-ms变换：比例（1.25）；
转换：比例（1.25）；
}
Test按钮
这只是一个供那些使用
transform:scale（1.05）
on:hover-on-Firefox的图像不稳定/不稳定的人参考的按钮，它解决了我的问题

transform: scale(1.05) rotate(0.02deg);

因此，这完全是一个伪造的旋转Firefox黑客，它阻止了这种浮躁的图像缩放效果。
我得到的一个快速解决方案是，与其直接应用变换/转换或任何您正在应用的样式，不如将其封装在其他组件中（假设在div中）并在那里应用样式，效果会更好，如果您添加

背面可见性：隐藏

对于包装器组件，它变得更好
 你试过将em中的填充改为像素或百分比吗？@SravanS是的，我刚刚用px更新了一个提琴，但仍然遇到同样的问题。我已将你的建议添加到提琴中，但结果没有改变：这成功了。被接受的解决方案并没有完全解决这个问题，子元素仍然不稳定。
transform: scale(1.05) rotate(0.02deg);