标签：03 渲染 IOS 09 投影 2021 滑标 组件 图层

需求

一个滑竿，上面的滑标是个盾牌形不规则形状，需要添加投影。滑标可通过点击或拖动而移动位置，
看了之前的项目，使用了一张带投影的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的translateY来创建新图层。应用到组件后发现无效。
不对，整个组件放在新图层中内部运行机制还一样的。然后把上述属性仅仅应用到滑标的图片元素后，一切OK了，影子跟着主人行动刷刷的，大功告成。

总结

遇到渲染问题时，可考虑通过能新建图层的属性来调整优化。

标签：03,渲染,IOS,09,投影,2021,滑标,组件,图层
来源： https://blog.csdn.net/daoke_li/article/details/120088626

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。