css3滤镜投影filter: drop-shadow在IOS上不更新的问题

需求

一个滑竿，上面的滑标是个盾牌形不规则形状，需要添加投影。滑标可通过点击或拖动而移动位置，
看了之前的项目，使用了一张带投影的png透明图片实现。但本次尺寸调整，设计图上取到的尺寸和位置是滑标不带投影的部分，目测不准，设计要给出精确的位置也比较困难，我说可以用css3中的滤镜投影功能（filter: drop-shadow(rgba(x, x, x, 0.2) 2px 0px 6px)）试一下。
开发框架是react，UI库antd-mobile，滑竿使用其中组件

问题

先用设计给的盾牌图片替换滑标。加上投影后，使用同样的参数，目测却和设计图有点差别，不过这也好调。直到发版测试后，用IOS一看，滑标跑了，投影还残留着！安卓没问题，IOS无论新老版本都不行。
猜想一下原因，可能是IOS浏览器的渲染优化机制，把滑标的投影绘制到了外层的元素上。当滑标自己单独动的时候，外层带阴影的div因react机制并未更新导致。

解决

既然是更新问题，那就从刷新dom下手。给滑标组件增加了个随机key值后，效果出来了，但仔细一看，滑标左右的投影跟着过来了，而上下的还残留！
然后把key加到父组件容器上，这下点击后上下左右的投影都跟着走了。但还没来得及高兴，发现拖着滑标一走，每次只能拖动一格。仔细一想，滑标组件都更新了，滑动事件也会跟着重新绑定，相当于变动后需要重新触发。这个方法宣告失败！
仔细琢磨了一下，想起图层功能可以优化渲染性能，尝试通过transform的translateZ来创建新图层。应用到组件后发现无效。
不对，整个组件放在新图层中内部运行机制还一样的。然后把上述属性仅仅应用到滑标的图片元素后，一切OK了，影子跟着主人行动刷刷的，大功告成。

总结

遇到渲染问题时，可考虑通过能新建图层的属性来调整优化。有时设置随机key强制刷新也是一种方法，最好判断IOS以避免无辜的安卓耗费性能。