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。
附上关键部分代码截图：
?
