带有 CSS3 模糊滤镜的 Div 在过渡时显示模糊的边缘

Question

我开始认为这是 Chrome 中的一个错误，因为 safari 没有问题，我已经搜索了 SO 寻找解决方案，但还没有提出。

问题是，当应用 css 过滤器模糊然后剪裁边缘时，如果您尝试转换该 div，它会暂时显示模糊边缘，即使您已将内部 div 缩放到过滤器模糊之后。

查看我的示例并单击图像（查看图像边缘）：http : //codepen.io/anon/pen/MYqbmJ

这里有什么想法吗？

$('#background').on('click', function() {

  $(this).toggleClass('ready');

});

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
}

#background {
  background-image: url(http://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);
  -webkit-background-size: contain;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  left: -35px;
  right: -35px;
  top: -35px;
  bottom: -35px;
  -webkit-filter: blur(15px);
  position: absolute;
  transition: transform 300ms ease-in-out;
  transform: scale(1.1);
}

#background.ready {
  transform: scale(2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="background"></div>
</div>

Answer 1

您可以尝试通过考虑伪元素来分离过滤器和变换。它似乎在 Chrome 中正确呈现

$('#background').on('click', function() {

  $(this).toggleClass('ready');

});

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
}

#background {
  background-image: url(https://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);
  background-size: 0 0;
  left: -35px;
  right: -35px;
  top: -35px;
  bottom: -35px;
  position: absolute;
  transition: transform 300ms ease-in-out;
  transform: scale(1.1);
}
#background:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  filter: blur(15px);
}
#background.ready {
  transform: scale(2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="background"></div>
</div>