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

原创已于 2022-05-07 17:18:15 修改 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#safari #javascript #前端

于 2022-05-07 16:04:44 首次发布

经验 web前端工程师专栏收录该内容

11 篇文章

订阅专栏

这篇博客讲述了在项目中遇到的一个兼容性问题，即使用filter:drop-shadow改变图标颜色的方法在Chrome上正常工作，但在Safari浏览器中失效。作者分析了原因，发现Safari对filter的渲染方式不同，并尝试使用-webkit-mask-image作为替代，但未在iOS上生效。最后，通过查阅Apple官方文档，采用-webkit-mask-box-image解决了问题。代码示例展示了在Vue中如何应用该解决方案。

项目场景：

我们通常使用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>