crossfading element wide image using CSS blur and opacity causes problem in chrome

Question

Original Intention

I want to make image slideshow, using opacity and blur during image transition.

Result

White border appears on the edge, so I looked into SO, and found this answer:
https://stackoverflow.com/a/42963980/11769757

Everything works well in Firefox, but doesn't work in Chrome. There is still white edge during transition no matter how I increase scale. It looks like chrome ignores area outside the browser window.

JSFiddle example

[Image1] In chrome, there are white edges
[Image2] but in firefox, it works well

However, when I put blur on image directly (not in animation), white edge dissapears from both browser. So maybe my animation is wrong but I can't find where is the mistake.

Code

I put two div with background image, and put class to each for crossfading between images.

HTML

<div style="{'background-image': `url(image1)`}" class="full blur-leave-active"/>
<div style="{'background-image': `url(image2)`}" class="full blur-enter-active"/>

CSS

.full {
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1.2);
}

.blur-leave-active {
  animation: blur-animation-out 4s;
}
.blur-enter-active {
  animation: blur-animation-in 4s;
}

@keyframes blur-animation-out {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  30% {
    filter: blur($blur-width);
    opacity: 0.8;
  }
  50% {
    opacity: 0;
  }
}

@keyframes blur-animation-in {
  0% {
    filter: blur($blur-width);
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur($blur-width);
  }
  80% {
    filter: blur(0);
  }
}

Question

Am I missing something? How to make filter blur animations with window full size image without white borders in Chrome?