親コンテナエッジぼかしトランジションバグ

Question

ラッピングdivの内側にある背景Divをぼかそうとしています。

子div（ぼかしているdiv）の不透明度を遷移させると、ぼかしは遷移中に親要素まで伝播しているように見えます。ここで

HTML /ジェイド

div 
    div(class="bg" style="background: url('http://placekitten.com/300') no-repeat center center; background-size: cover;") 

SCSS

div { 
    cursor: pointer; cursor: hand; 
    .bg{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    transition: 550ms ease-out; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    transform: scale(1.1); 
    } 
} 
div { 
    position: relative; 
    height: 500px; width: 500px; 
    overflow: hidden; 
    background-color: rgba(0, 0, 0, 1); 
} 
div:hover { 
    .bg { 
    opacity: .6; 
    } 
} 

はバグを示すcodepenあります。

http://codepen.io/LAzzam2/pen/kXdwWp

誰もがこれに任意の修正を知っている（クロームで起こって）？ありがとう！

Answer 1

SVGフィルターが良いFIX-

http://codepen.io/LAzzam2/pen/pbmAJB

HTML

<div class="wrapper"> 
    <div class="bg"> 
    <svg id="svg-image"> 
     <image x="0" y="0" id="svg-image" width="100%" height="100%" xlink:href="http://placekitten.com/300" /> 

     <filter id="blur-effect-1"> 
      <feGaussianBlur stdDeviation="2" /> 
     </filter> 
    </svg> 
    </div> 
</div> 

CSS

#svg-image-blur { height: 220px; width: 320px; } 

.bg { 
    transition: all 250ms ease-out; 
    opacity: 1; 
    position: absolute; 
    top: 50%; left: 50%; 
    height: 100%; width: 100%; 
    transform: translate(-50%, -50%) scale(1.05); 
    -webkit-backface-visibility: hidden; 
} 

.wrapper { 
    cursor: pointer; cursor: hand; 
    overflow: hidden; 
    height: 450px; width: 450px; 
    position: relative; 
    background-color: black; 
} 

#svg-image { 
    height: 100%; width: 100%; 
    filter:url(#blur-effect-1); 
} 

.bg:hover { 
    opacity: .6; 
    transform: translate(-50%, -50%) scale(1.15); 
} 

Answer 2

か。可能性のように見えます背景画像をラップし、その要素の変換をアニメーション化するだけです。そのアニメーション要素の子をぼかします。

http://codepen.io/LAzzam2/pen/kXdwWp

HTML のdiv .wrap DIV（クラス= "BG" スタイル= "背景：URL（ 'http://placekitten.com/300'）何のリピートセンターセンターません。背景サイズ：カバー;"）

CSS

div { 
    cursor: pointer; cursor: hand; 
    .wrap { 
    transition: all 250ms ease-out; 
    } 
    .bg{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    transition: 550ms ease-out; 
    position: absolute; 
    top: -10px; left: -10px; 
    width: calc(100% + 20px); 
    height: calc(100% + 20px); 
    } 
} 
div { 
    position: relative; 
    height: 500px; width: 500px; 
    overflow: hidden; 
    background-color: rgba(0, 0, 0, 1); 
} 
div:hover { 
    .wrap { 
    opacity: .6; 
    transform: scale(1.5); 
    } 
}