Webkit/Chrome blur filter visual bug in transition, edges don't render properly in transition

Question

I've created a Jfiddle showing the problem:

https://jsfiddle.net/qfgfszey/

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

Is there any webkit css to fix this?

Thanks!

Code here:

<div class="outer">
<div class="inner"
</div>
</div>

.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 */}

Answer 1

I stumbled onto this while researching sort of the opposite issue observed here.

But this one can be solved by adding backface-visibility: hidden; to the transitioning element (in this case .inner).

https://jsfiddle.net/xfo81Lpb/

Answer 2

The will-change CSS property hints to browsers how an element is expected to change.

this helps here, but use it wisely (no need to set will-change if you don't have rendering issues) it can affect browser performance.

 .inner {
   will-change: transform;
}