问题描述
最近在写公司app的用户年终盘点,首页需要做个动效。大概效果就是很多花或者其他元素从屏幕里往屏幕外扩散的效果。
我立马想到了用transform来做,只要将图片在z轴上进行移动就行,然后再配合filer: blur()
加强元素的层叠关系。
但是!!!做完之后在电脑上看非常完美,提测之后,发现在安卓手机上,元素由内(translateZ为负值)往外(translateZ变为0)移动时,竟然有个边框,像是设置了overflow:hideen
一样,然后我就瞎改一通,把它的所有父元素都加上了overflow:visibly
,但是根本没有用。
效果如下,这是从内到屏幕表面的元素(还有一层是从屏幕表面到屏幕外的元素,为了方便体现效果,我给隐藏了)。
问题解决
试着改了各种样式没试出来,无奈之下,写了个小demo,只将简单的元素进行z轴移动,发现并没有这问题。这时候我恍然大悟!,肯定不是transform的兼容性问题。
思考片刻之后,想到了可能是我设置了元素的blur模糊导致的,果不其然,去掉之后问题解决了!
解决方法: 进行translateZ
Z轴移动的元素,不能设置filer:blur
,否则安卓手机上,元素在屏幕内(translateZ
为负值)时会形成一个边框,裁去屏幕外的部分。(另外我试了box-shadow
没事)