css filter blur animations snap/jump at the end

Question

I am trying to achieve blurry progressive image loading but this keeps happening.

At the end of the blur animation, the background image jumps / moves around a few pixels and then back to its' original position.

It's a really tiny move at the end of the blurry animation when background image is fully shown. However it's very annoying to the user.

window.onload = function () {
  let downloadImage = new Image()
  downloadImage.onload = function () {
    let element = document.getElementsByClassName('progressive')[0]
    element.classList += ' loaded' 
  }
  downloadImage.src = 'https://preview.ibb.co/cHKBu6/banner_bg_web.png'
}

.container {
  height:700px;
  width:100%;
  background-color:grey;
  position:relative;
  overflow:hidden;
}

.progressive {
  background: url('https://image.ibb.co/kajY7R/progressive_banner_bg_web.png') no-repeat;
  background-size:cover;
  background-position:50%;
  position:absolute;
  width:100%;
  height:100%;
  filter:blur(20px);
  transition:filter 2s;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.progressive.loaded {
  background: url('https://preview.ibb.co/cHKBu6/banner_bg_web.png') no-repeat;
  background-size:cover;
  background-position:50%;
  filter:none;
}

<div class='container'>
  <div class='progressive'>
    
  </div>
  <div class='content'>
    
  </div>
</div>

Couldn't figure out why this is happening..

Have also tried using different images to make sure that it's not because of image size.