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);
}

你可能感兴趣的:(safari,前端,css)