Div with CSS3 Blur Filter Shows Blurred Edges on Transition

Question

I'm starting to think this is a bug in Chrome because safari doesn't have problems and I've scoured the SO looking for a solution and haven't come up with one.

The problem is that when applying a css filter blur and then clipping the edges, if you try to transition that div, it will show the blur edge momentarily, even if you've scaled the inner div past the filter blur.

Check out my example and click the image (look at image edges): http://codepen.io/anon/pen/MYqbmJ

Any ideas here?

$('#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

You can try to seperate the filter and the transform by considering a pseudo element. It seems to correctly render in 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>