Sfocatura filtro CSS: impedisce i bordi dell'immagine indefiniti su un'immagine sfocata durante la transizione CSS

Question

La prevenzione di un'immagine con bordi sfocati indefiniti può essere ottenuta aggiungendo un margine negativo, ma durante una transizione CSS questo non riesce. Come puoi mantenere i bordi di un'immagine definiti durante una transizione CSS mentre aggiungi o rimuovi una classe sfocatura filtro?

testato in:

• Firefox 37: funziona benissimo!
• Chrome 42: il confine in cui l'immagine e l'elemento padre soddisfare l'immagine lampeggiavano/sfocata/non definito
• IE9: non tanto ...

Partenza il mio esempio: Codepen

HTML:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'> 
<div class="container"> 
    <img class="blur" src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/> 
</div> 
<div class="col"> 
<h2 class="montserrat">Hover Over Image</h2> 
<hr> 
    <p class="hind">Preventing an image from having undefined blurry edges can be achieved by adding negative margin, but during a CSS transition this fails. As you can see, on-hover, the edges of the image become undefined/blurred. How can you keep the edges of an image defined during a CSS transition while applying or removing filter blur?<br><br>Hover over the image!</p> 
</div> 

CSS:

html,body{ 
    margin:0; 
    text-align:center; 
    background:#F8F8F8; 
    height:100%; 
} 

h2{ 
    margin:1em 0; 
    padding:0; 
    line-height:1; 
    color:#111; 
} 
p{ 
    margin:1em 0; 
    padding:0; 
    line-height:1; 
    text-align:justify; 
    color:#999; 
} 

.montserrat{ 
    font-family: 'Montserrat', sans-serif; 
} 
.hind{ 
    font-family: 'Hind', sans-serif; 
} 
hr { 
    width:100%; 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #222; 
    margin: 1em 0; 
    padding: 0; 
    line-height:0; 
} 

.col{ 
    max-width:400px; 
    display:inline-block; 
    height:100%; 
    float:left; 
    background:#333; 
    padding-left:20px; 
    padding-right:20px; 
} 

.container{ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    width:10%; 
    display:inline-block; 
    padding-top:10%; 
    position:absolute; 
    overflow:hidden !important; 
    border-radius:50%; 
    -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);/*prevents image from overflowing*/ 
} 

.container img{ 
    position:absolute; 
    min-width:calc(100% + 30px); 
    height:calc(100% + 30px); 
    left:-15px; 
    right:-15px; 
    top:-15px; 
    bottom:-15px; 
    -webkit-transition: .5s ease-in-out; 
} 

.blur{ 
     -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); 
} 

Solo uno smidge di jQuery:

$(document).ready(function(){ 
    $('img').hover(function(){ 
     $(this).toggleClass('blur'); 
    }); 
}); 

Answer 1

Su Chrome è possibile aggiungere

backface-visibility: hidden; 

sulla vostra immagine, fissa un po 'di problemi di sfocatura.

Answer 2

I filtri sulle immagini (e anche alcune animazioni e transizioni) hanno risultati molto migliori se applicati a contenuti in modalità accelerata HW. Provare a forzare il browser utilizzare tale modalità, più semplicemente usando un po 'di Trasformazione 3D:

.container img{ 
    transform: translateZ(0.1px) 
} 

vedere questo: http://codepen.io/ondrakoupil/pen/GJpaJo E' liscia ora (Chrome 39 su OS X)