transform: scale 运动过程中 文字图像 模糊化 如何解决？

Question

transform: scale(1.1);

Answer 1

使用 translateZ(0) 或 translate3d(0, 0, 0) 触发硬件加速：

.element {
  transform: scale(1.1) translateZ(0);
}

或

.element {
  transform: scale(1.1) translate3d(0, 0, 0);
}

Answer 2

图片像素放大会模糊，图片尝试修改成svg

Answer 3

下面三个方法可以试一下

backface-visibility: hidden;

transform: translateZ(0);

-webkit-font-smoothing: subpixel-antialiased;

答案来源
https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome

Answer 4

对上面的图标单独设置缩放。对下的文字用font-size控制。先试试看这个有效果不