Jquery CSS过滤器模糊：在CSS转换期间防止模糊图像上未定义的图像边缘

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

测试地点：

• Firefox37：非常好用
• Chrome 42：图像和 父元素符合图像闪烁/模糊/未定义
• IE9：没有那么多

看看我的例子：

HTML:

只是一点点jQuery：

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

在Chrome上，您可以添加

  backface-visibility: hidden;

在您的图像上，它修复了一些模糊问题。

对图像（以及一些动画和过渡）进行过滤，在应用于处于硬件加速模式的内容时，效果要好得多。尝试强制浏览器使用该模式，最简单的方法是使用一些3d变换：

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

见此：

---

它现在很平滑（OSX上的Chrome39）

我想你是在用Chrome进行测试，对吗？因为它在firefox上运行良好。正确，我正在Chrome上测试。我肯定应该把这一点包括进去。我将把它添加到描述中。它在Firefox中工作得很好，在IE9中看起来很普通。不过，我对IE9不像对Chrome那样关心。如果你在Chrome中进行测试，你会看到在转换过程中，父元素和图像相遇的边界是如何闪烁/未定义的。你能截图吗？因为我在chrome中发现了一些奇怪的东西，但我不会说边框模糊了，我会说它对背景进行了采样，显示出比消失时更暗的边框。如果是这样的话，可能是因为该功能的新颖性，也许你不必担心，他们会在将来修复它。顺便说一句，我检查了它，使图像更大的修复，但它没有。如果这对您非常重要，您可以添加一个更标准的svg模糊吗？只是一个suggestion@Vandervals这也正是我所看到的。通过将translate3d属性添加到Accelerate处理并将背面可见性设置为hidden，似乎或多或少解决了这个问题。奇怪的是，在使用模糊过滤器时，未定义图像边界的问题非常普遍。解决这个问题的标准方法是通过使图像比它所在的容器大来隐藏未定义的边缘，我已经这样做了。它基本上是在不属于它的地方应用模糊吗？注意：我在那支笔中打开了AutoRefixer，所以你可能需要添加一些供应商前缀，使其在所有浏览器中都能工作。这无疑有助于清理过渡。看起来好多了。唯一的问题是边界模糊。但我认为这并不一定会影响用户体验。我只是不明白为什么与图像相交的边界仍然有模糊的区域和伪影。这肯定也有一点帮助。我结合了这个和翻译3D技术。它或多或少地解决了过渡问题。只是仍在处理未定义的边。正如其他人指出的，这可能只是一个奇怪的Chrome问题。

  backface-visibility: hidden;

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