Баг с blur(), помогите пожалуйста!

Доброго времени суток!

С последним обновлением 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);
  }
}