jquery – CSS滤镜模糊：在CSS过渡期间防止模糊图像上的未定义图像边缘

可以通过添加负边距来防止图像具有未定义的模糊边缘,但是在CSS转换期间,这会失败.在添加或删除过滤器模糊类时,如何保持CSS过渡期间定义的图像边缘？

测试中：

> Firefox 37：效果很棒！
> Chrome 42：图像和边框所在的位置
父元素满足图像闪烁/模糊/未定义
> IE9：没那么多……

看看我的例子：Codepen

HTML：

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);
}

只是一个微笑的jQuery：

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

最佳答案

当应用于处于HW加速模式的内容时,图像上的过滤器(以及一些动画和过渡)具有更好的结果.尝试强制浏览器使用该模式,最简单的方法是使用一些3d变换：

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

见：http://codepen.io/ondrakoupil/pen/GJpaJo
现在很流畅(OS X上的Chrome 39)