フィルタプロパティの不具合（Chrome）を修正していますか？

Question

JSFIDDLE

私はホバー上の要素のfilter: blur()プロパティをアニメーション化しようとしています。例えば：

HTML

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS：

.parent { 
    width: 300px; 
    height: 300px; 
    position: relative; 
    overflow: hidden; 
} 

.child { 
    width: 100%; 
    height: 100%; 
    background: url(http://lorempixel.com/output/cats-q-c-300-300-9.jpg); 
    transform: scale(1.2); 
    transition: all .45s linear; 
} 

.parent:hover .child { 
    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 

それは動作しますが、Chromeで盗聴しているようです。アニメーションは実行されますが、終了するまで画像のエッジがぼやけます。 FirefoxとSafariではうまくいきます。どのように私はこの問題を回避することができます任意のアイデア？意図した結果は、どの点でもぼやけたエッジが見えることなくアニメートされることです。

Answer 1

EDITED：

が.childに入れる：

-webkit-transform: translateZ(0); 
     -webkit-backface-visibility: hidden; 
     -webkit-perspective: 1000; 

.parent { 
 
     width: 300px; 
 
     height: 300px; 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 

 
    .child { 
 
     width: 100%; 
 
     height: 100%; 
 
     background: url(http://lorempixel.com/output/cats-q-c-300-300-9.jpg); 
 
     transform: scale(1.2); 
 
     transition: all .45s linear; 
 
     -webkit-transform: translateZ(0); 
 
     -webkit-backface-visibility: hidden; 
 
     -webkit-perspective: 1000; 
 
    } 
 

 
    .parent:hover .child { 
 
     -webkit-filter: blur(10px); 
 
     filter: blur(10px); 
 
    }

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 2

[OK]をので、私は子供にtransformプロパティを変更しようとしましたが、それは動作しますが、単に置き換えますそれは：

transform: translate3d(0, 0, 0) scale(1.2); 

このトリックは、Webkitブラウザで奇妙なアニメーションを多く解決します。

https://davidwalsh.name/translate3d

Answer 3

あなたは明るいエッジに対抗するためにホバー上の親にボックスシャドウを追加することで、回避策を行うことができます。 fiddle

Htmlの

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS

.parent { 
    width: 300px; 
    height: 300px; 
    position: relative; 
    overflow: hidden; 
    transition: all 0.45s linear; 
} 

.child { 
    width: 100%; 
    height: 100%; 
    background: url(http://lorempixel.com/output/cats-q-c-300-300-9.jpg); 
    transform: scale(1.2) translate3d(0,0,0); 
    transition: all 0.45s linear; 
    backface-visibility: hidden; 
} 

.parent:hover .child { 
    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 

.parent:hover { 
    -webkit-box-shadow: inset -50px -50px 50px -40px rgba(0,0,0,0.5); 
}