Search code examples
cssgoogle-chromewebkitcss-filters

Weird glitch when using transition to filter:blur(0) in Chrome

enter image description here

This started happening just recently on Chrome (right after the Chrome 88 update).

It does it for all webkit browsers I tested on Windows (Brave/Edge)

Seems like something to do with cached framebuffer before revering to plain text but I wouldn't know. Pretty sure it has to be fixed from above but any idea for a workaround in the meantime?

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>

Solution

  • This is fixed with Chrome 89. I am running 89.0.4389.82 and am not seeing this issue.

    See here: https://bugs.chromium.org/p/chromium/issues/detail?id=1181420&q=filter%20blur%20animation&can=2