在 Chrome 中使用过渡到 filter:blur(0) 时出现奇怪的故障答案

【问题标题】：Weird glitch when using transition to filter:blur(0) in Chrome在 Chrome 中使用过渡到 filter:blur(0) 时出现奇怪的故障
【发布时间】：2021-05-16 00:26:08
【问题描述】：

最近才开始在 Chrome 上发生这种情况（在 Chrome 88 更新之后）。

它适用于我在 Windows (Brave/Edge) 上测试过的所有 webkit 浏览器

在恢复为纯文本之前似乎与缓存的帧缓冲区有关，但我不知道。很确定它必须从上面修复，但在此期间有任何解决方法的想法吗？

h1{
  font-family:  sans-serif;
  font-size: 32px;
  text-align: center;
  margin:5vw;
}

h1 span{
  transition:1s;
  filter: blur(0);
}
h1 span:hover{
  transition: 0s;
  filter: blur(10px);
}
      
      
@keyframes blur-animation {
  from{
    filter: blur(10px);
  }
}

&lt;h1&gt;&lt;span&gt;H&lt;/span&gt;&lt;span&gt;E&lt;/span&gt;&lt;span&gt;L&lt;/span&gt;&lt;span&gt;L&lt;/span&gt;&lt;span&gt;O&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;W&lt;/span&gt;&lt;span&gt;O&lt;/span&gt;&lt;span&gt;R&lt;/span&gt;&lt;span&gt;L&lt;/span&gt;&lt;span&gt;D&lt;/span&gt;&lt;/h1&gt;

【问题讨论】：

标签： css google-chrome webkit css-filters

【解决方案1】：

Chrome 89 已解决此问题。我正在运行 89.0.4389.82，但没有看到此问题。

请看这里：https://bugs.chromium.org/p/chromium/issues/detail?id=1181420&q=filter%20blur%20animation&can=2

【讨论】：