BUG来源:
最近为百事可乐促销活动开发上线的一个H5应用。项目采用的uni-app开发的,其中有一个自己写的滑块拼图验证组件,采用的是CSS3的clip-path属性,根据一段svg路径剪切出来的图形进行拼图。都上线正常运行一段时间了,突然有用户反馈出现了bug。剪切的图片失效了,呈现出了一个白色的底框。(图片上是背景图片缺失的那块失效了,滑动拼图的块正常)
原因及解决方案:
使用clip-path的父容器的样式里面,少写了overflow:hidden; 把这行添加上就可以了。在之前的IOS版本以及安卓系统里面都完全正常显示的。
愿意看看解决过程的朋友请继续(*^_^*)。
解决过程:
首先这个问题是突然出现的,之前正常。并且反馈的客户使用的是iphone12, 其他用户没有这样的反馈。
第一反应是iphone12特有的?于是让同事也用P12测试了一下,确实是出现了,不是偶然一次出现的bug。
初步网上查了一下关于iphone12下面clip-path失效的信息,发现完全没有啊~~~~~~~~~~
只能靠自己了。
找朋友拿iphone XR 测试了一下,发现确实是正常的。进一步怀疑是跟iphone版本有关系了。然后核查两个手机系统,发现P12是IOS14.6, 而正常的XR是14.3。于是,让朋友的XR升级了一下系统。升级到14.6之后,果然出现了。/(ㄒoㄒ)/~~
然后拿自己的P8也升级到14.6系统版本,测试了一下,也出现bug。
接下来,误入歧途。因为我的组件上是使用了两次svg的clip-path,于是怀疑是有冲突。pathid已经是区分开了的,无冲突。马上给各自的父容器框元素添加了ID,然并卵.............
接着,注释掉正常的那个元素,发现出现BUG的那部分依然无效。那一定是这个元素或路径哪里写错了。
仔细对比了一下两个元素的样式,突然发现,出现BUG的元素样式比正常的那个少了一行overflow:hidden; 怀疑是它的原因?
添加上一试,哈哈哈哈哈哈哈哈!
居然搞定了!!!
具体为什么会这样,那就不知道了,也许IOS升级系统后,safari也有更新,CSS解释更严格了?还是自己技艺不精,没有仔细研究clip-path的使用呢。
后记:
整个问题解决花去了一个多小时的时间,虽然没有折腾很久,但也是多亏了突然发现的这行样式差异,庆幸啊,要不然不知道要折腾多久。
顺便说一下,之前还出现过一次其他的问题。就是只使用一个svg做clip-path的时候,两个容器使用它做剪切,在安卓下面正常,在IOS下面会错位的,无法完全重叠。所以多个元素剪切的时候,一定为每一个元素单独写上一个clipPath,并且使用id属性区分开来,哪怕两个剪切路径完全相同,否则会有冲突,造成BUG。
附上关键部分代码截图: