Làm mờ bộ lọc CSS: Ngăn không cho ảnh xác định trên ảnh mờ trong quá trình chuyển đổi CSS

Question

Ngăn không cho ảnh có các cạnh mờ không xác định bằng cách thêm lề âm, nhưng trong quá trình chuyển đổi CSS thì không thành công. Làm thế nào bạn có thể giữ cho các cạnh của một hình ảnh được xác định trong quá trình chuyển đổi CSS trong khi thêm hoặc xóa lớp lọc mờ?

Tested trong:

• Firefox 37: hoạt động tuyệt vời!
• Chrome 42: biên giới nơi mà các hình ảnh và các yếu tố phụ huynh đáp ứng hình ảnh lóe lên/mờ/không xác định
• IE9: không có quá nhiều ...

Kiểm tra ví dụ của tôi: 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); 
} 

Chỉ cần một smidge của jQuery:

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

Answer 1

Mở Chrome bạn có thể thêm

backface-visibility: hidden; 

Mở hình ảnh của bạn, nó sửa chữa một chút vấn đề làm mờ.

Answer 2

Bộ lọc trên hình ảnh (cũng như một số hoạt ảnh và chuyển tiếp) có kết quả tốt hơn nhiều khi được áp dụng cho nội dung ở chế độ tăng tốc HW. Hãy thử buộc trình duyệt sử dụng chế độ đó, chỉ cần nhất bằng cách sử dụng một số 3d transform:

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

Xem này: http://codepen.io/ondrakoupil/pen/GJpaJo Đó là mịn bây giờ (Chrome 39 trên OS X)