Доброго времени суток!
С последним обновлением Google Chrome до 66 версии, появился очевидный баг с анимацией при наличии там filter:blur(). При наведении картинка мигает.
В Opere тоже наблюдается такой эффект, но намного слабее, некое дергание. Такой же эффект был и в предыдущей версии Google Chrome, а с последней версией все стало еще хуже. В Firefox же все гладко как и задумывалось. Это как-нибудь возможно исправить?
Наглядный пример на Codepen: https://codepen.io/anon/pen/GdpvdW
HTML:
<div class="main">
<div class="wrapper">
<div id="target" class="blur">This element has a background-image, which should be blured</div>
</div>
<div class="content-layer">
<input id="searchMain" class="animated fadeIn delay">
</div>
</div>
CSS
target{
height: 100px;
width: 500px;
background: url(http://lorempixel.com/500/100);
}
.blur {
-webkit-animation: blur 0.5s linear forwards;
-moz-animation: blur 0.5s linear forwards;
-ms-animation: blur 0.5s linear forwards;
-o-animation: blur 0.5s linear forwards;
animation: blur 0.5s linear forwards;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.delay {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes blur {
to {
-webkit-filter: blur(5px);
filter: blur(5px);
}
}
@-moz-keyframes blur {
to {
-moz-filter: blur(5px);
filter: blur(5px);
}
}
@keyframes blur {
to {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
}
}