css filter 的坑

【背景】

全局主题置灰需求，采用 filter: grayscale(1); 实现。

在实际应用过程中，发现了一些坑点。

记录分享，希望对你有些许帮助。

1、配置了 css filter 属性的元素，其子元素的 fixed 定位会失效。

【原因】

filter 会影响 fixed 的定位参照。由相对视口改为相对设置了 filter 的祖先。

【解决方案】

web端： 将 filter 设置在 html 上即可。

小程序：需逐个元素排查，确保设置了 filter 的元素，不包含存在 fixed 定位的子元素。

2、配置了 css filter 属性的元素，z-index会被提升，可能会覆盖掉其他有定位元素

【解决方案】

注意调整 z-index 层级。