问题描述

最近在写公司app的用户年终盘点，首页需要做个动效。大概效果就是很多花或者其他元素从屏幕里往屏幕外扩散的效果。
我立马想到了用transform来做，只要将图片在z轴上进行移动就行，然后再配合filer: blur()加强元素的层叠关系。
但是！！！做完之后在电脑上看非常完美，提测之后，发现在安卓手机上，元素由内（translateZ为负值）往外（translateZ变为0）移动时，竟然有个边框，像是设置了overflow:hideen一样，然后我就瞎改一通，把它的所有父元素都加上了overflow:visibly，但是根本没有用。

效果如下，这是从内到屏幕表面的元素（还有一层是从屏幕表面到屏幕外的元素，为了方便体现效果，我给隐藏了）。

问题解决

试着改了各种样式没试出来，无奈之下，写了个小demo，只将简单的元素进行z轴移动，发现并没有这问题。这时候我恍然大悟！，肯定不是transform的兼容性问题。
思考片刻之后，想到了可能是我设置了元素的blur模糊导致的，果不其然，去掉之后问题解决了！

解决方法： 进行translateZZ轴移动的元素，不能设置filer:blur，否则安卓手机上，元素在屏幕内（translateZ为负值）时会形成一个边框，裁去屏幕外的部分。（另外我试了box-shadow没事）