IOS(safari)下filter:drop-shadow 问题及使用mask解决

项目场景：

我们通常使用filter:drop-shadow 来更改图标颜色,
但在近期的一个项目中我遇到了该方法无法在IO(safari)下显示的问题

问题描述

这是一个兼容性的问题,在chrome中可以正常显示,但在safari中无法显示

---

原因分析：

显然safari对filter:drop-shadow渲染方式不同.其只渲染元素可视的部分.

---

解决方案：

使用 mast 做替代方案,
但在使用 -webkit-mask-image / mask-image ,在IOS上都没有效果.各种百度都显示ios支持mask属性.
在这里我只想说 “百度废物”.

最终解决：

developer.apple.com Using Masks

apple用了不同的属性.
-webkit-mask-box-image: url(heartmask.png)

/*VUE*/
<template>
  <div class="icon" :style="{
     
     '-webkit-mask-box-image':'url('+data.icon+')'}"/>
</template>

<style>
.icon{
      
      
  width: 60px;
  height: 60px;
  background: red;
}
</style>