CSS缩放转换和过滤器模糊的问题

Question

在合并两个属性：filter: blur(15px)和transform: scale3d(1.2,1.2,1)时，我在Chrome浏览器上遇到了问题。

我有两张图片，一张一张。较高层上的图像模糊，但是当我应用该滤镜时其边缘变得透明，因此我向父div添加了overflow:hidden，并放大了图像。我希望看到的只是图像的不透明部分。

它可以在Firefox和Opera上正常运行，但不能在Chrome和MS Edge浏览器上运行。该如何解决？

#images-box{
  position: relative;
  width: 500px;
  height: 280px;
  overflow:hidden;
}

.image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
  background-size: cover;
  background-position: 50% 50%;
}
.image.blured{
  -webkit-filter: blur(14px);
  filter: blur(14px);
  z-index: 2;
  -webkit-transform: scale3d(1.2,1.2,1);
  transform: scale3d(1.2,1.2,1);
}

<div id="images-box">
  <div class="image"></div>
  <div class="image blured"></div>
</div>

Answer 1

将scale3d(1.2,1.2,1)更改为scale(1.2)可以帮助我使用Chrome 86.0.4240.198。