Chrome blurred image flicker

by malwilley

HTML

<button>Hover me</button>

  <div class="container">
    <div class="blurred"/>
  </div>

CSS

button {
  width: 400px;
  height: 60px;
  transition: transform 500ms;
}

button:hover {
  transform: translateY(-4px);
}

.container {
  margin-top: 20px;
  overflow: hidden;
  height: 200px;
  width: 400px;
}

.blurred {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: black;
  filter: blur(10px);
  transform: scale(1.2);
}