在 Chrome 中使用过渡到 filter:blur(0) 时出现奇怪的故障
Posted
技术标签:
【中文标题】在 Chrome 中使用过渡到 filter:blur(0) 时出现奇怪的故障【英文标题】:Weird glitch when using transition to filter:blur(0) in Chrome 【发布时间】: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);
<h1><span>H</span><span>E</span><span>L</span><span>L</span><span>O</span><span> </span><span>W</span><span>O</span><span>R</span><span>L</span><span>D</span></h1>
【问题讨论】:
【参考方案1】:Chrome 89 已解决此问题。我正在运行 89.0.4389.82,但没有看到此问题。
请看这里:https://bugs.chromium.org/p/chromium/issues/detail?id=1181420&q=filter%20blur%20animation&can=2
【讨论】:
以上是关于在 Chrome 中使用过渡到 filter:blur(0) 时出现奇怪的故障的主要内容,如果未能解决你的问题,请参考以下文章
如何获取 Chrome / WebKit 中过渡的元素的当前颜色?
Chrome 88 更改在 translate3d 过渡期间导致图像模糊