不透明度的动画会导致其他div上的模糊文本

Question

在Chrome中，我的文字看起来很模糊，我在我的css文件中将问题跟踪到我的animation，但我不知道为什么会导致此问题。

（确保你打开图像，否则你看不到很多区别）

启用动画（模糊）

禁用动画（清晰）

我已经尝试了很多我在堆栈溢出时发现的选项，但没有解决我的问题......

• Chrome Font appears Blurry

• CSS transition effect makes image blurry / moves image 1px, in Chrome?

• WebKit: Blurry text with css scale + translate3d

• Blurry text on Chrome when using CSS -webkit-transform

• Chrome animation makes text blurry

动画本身

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

animation: blink 2s infinite;

动画示例

Answer 1

我已经解决了这个问题，这是因为我的包装器组件有position: relative;，当应用transform时，它会以某种方式导致其余部分模糊。

查找具有position:relative;

的父级