在 Chrome 中使用到 filter:blur(0) 的过渡时出现奇怪的故障
Weird glitch when using transition to filter:blur(0) in Chrome
最近 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>
此问题已通过 Chrome 89 修复。我是 运行 89.0.4389.82,但没有看到此问题。
看这里:https://bugs.chromium.org/p/chromium/issues/detail?id=1181420&q=filter%20blur%20animation&can=2
最近 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>
此问题已通过 Chrome 89 修复。我是 运行 89.0.4389.82,但没有看到此问题。
看这里:https://bugs.chromium.org/p/chromium/issues/detail?id=1181420&q=filter%20blur%20animation&can=2