文字＆amp;图标显得模糊，并随着css变换效果移动

Question

所以我已经就这个问题进行了大量的研究，特别是在这个帖子中尝试了所有的东西：

https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome#=

但是，filter:blur(0); transform:translateZ(0)仅适用于笔记本电脑屏幕，而不适用于普通的IPS平板屏幕。你仍然可以看到文本的变化和模糊。有没有人有适用于笔记本电脑，普通显示器和浏览器的解决方案？下面是普通显示器上发生的事情的示例，请注意垂直移动图标。下面是我们正在使用的代码。

.article-catalogue {
  transition: transform .3s ease, box-shadow .3s ease,border .3s ease;
  filter: blur(0);
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

.article-catalogue:hover {
  transform: perspective(1px) translateZ(0) scale(1.02);
  box-shadow: 0px 12px 40px -10px rgba(51,51,51,.2);
}

有人想过，卡片中的翻转元素会导致问题吗？