safari中filter: drop-shadow()导致图片展示不出来

有时候我们可能需要通过css来改变一个svg图片的颜色，比如让其跟随主题色改变

.send-button {
  overflow: hidden;
  .send-button-img {
    filter: drop-shadow(@primary -24px 0px 0px);
    transform: translateX(24px);
  }
}

上面代码的原理是：

drop-shadow(@primary -24px 0px 0px): 这行代码为元素添加了一个阴影效果，阴影颜色为@primary，阴影位置向左移动24px；

transform: translateX(24px): 这行代码将元素向右移动24像素；

这样原本图片的位置就是此时阴影所在的位置

然后再给父元素添加overflow: hidden;把元素本身隐藏，只展示出阴影

这样就实现了视觉上的改变svg图片的颜色

---

但是这样在safari浏览器中，我们会发现图片消失了

盲猜大概是因为safari浏览器的渲染机制比较特殊，它认为元素本身都被隐藏了，所以阴影也就不应该展示出来

为了解决这个问题，结合网上的一些文档，尝试了以下一些方案：

尝试方案一：

开启3d模式，transform: translateZ(0);

未能解决

尝试方案二：

不要使用 overflow: hidden;

不可行，因为使用这个属性是为了改变icon颜色，原理是将给原图片添加投影，然后将投影放置到对应的位置，必须给父元素添加overflow: hidden;隐藏移动后的原图片，只展示对应位置的投影

尝试方案三：

添加 border-left: 1px solid transparent;

未能解决

尝试方案四：

给父元素添加 position: relative;

未能解决

尝试方案五（最终解决方案）：

让元素的投影偏移量在x和y方向分别多0.1px，但是在移动到对应位置时x方向和y方向少移动0.1px，这样在展示投影的同时，元素本身会展示出x方向和y方向交叉处的0.1px的角，其实应该是1px，

这样就保证了元素本身依然被展示了出来（肉眼几乎不可见），因此其投影（也就是改变颜色后的icon）就能正常展示了

问题得到解决

.send-button-img {
  filter: drop-shadow(@primary -24.1px -24.1px 0px);
  transform: translate3d(23.9px, 23.9px, 0px);
}