title: Webkit/Chrome blur filter visual bug in transition, edges don't render properly in transition
body: <p>I've created a Jfiddle showing the problem:</p>
  
  <p><a href="https://jsfiddle.net/qfgfszey/" rel="noreferrer">https://jsfiddle.net/qfgfszey/</a></p>
  
  <p>Hovering over the outer div starts the hover transition; When animating to scale and filter blur, the inside edges don't render properly until the end of the transition. It doesn't happen in Firefox or Safari. Notice the edges of the inside image are transparent (showing the black background), then it fixes it after the transition</p>
  
  <p>Is there any webkit css to fix this?</p>
  
  <p>Thanks!</p>
  
  <p>Code here:</p>
  
  <pre><code>&lt;div class="outer"&gt;
  &lt;div class="inner"
  &lt;/div&gt;
  &lt;/div&gt;
  
  .outer { width:500px; height:500px; overflow:hidden; background-color:black; position:relative; }
  
  .inner { width:100%; height:100%; background:url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.jpg); background-size:cover;
  -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}
  
  .outer:hover .inner { -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);     -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}
  </code></pre>