blur filter 动画完成后造成内容被裁剪(显示不全)

最近在 iOS 10 (iPhone5/iOS 10.2.1)上发现, 使用 CSS filter blur 动画时, 在动画结束以后, 部分内容被裁掉了, 即内容显示不全.

blur filter 动画完成后图片应该全部显示出来

但 iOS 10 下动画后内容显示不全

因为在 PC 端没有这个问题, 因此定性为兼容性问题.

遇到这种兼容性问题最好的解决方法就是单独拎出来(撇开其他因素的干扰), 大概分析一下 bug 触发的条件, 再逐步尝试 CSS 属性各个击破.

触发条件

* 动画元素有父子级关系

* 在父级做 blur filter 动画

* 父级 overflow: hidden

解决办法

在尝试了多种方法后, 有点摸不着方向了, 最后尝试在动画结束帧将 filter 给干掉, 就可以了....

一句话: 在定义动画结束帧时, 不要再使用 filter: blur, 而是使用 filter: none

从此天下太平...原来这么简单...

真是解决后恍然大悟, 找问题时四处碰壁啊.

具体重现这个现象的 demo, 请参考 blur-filter-bug.html