【背景】
全局主题置灰需求,采用 filter: grayscale(1); 实现。
在实际应用过程中,发现了一些坑点。
记录分享,希望对你有些许帮助。
1、配置了 css filter 属性的元素,其子元素的 fixed 定位会失效。
【原因】
filter 会影响 fixed 的定位参照。由相对视口改为相对设置了 filter 的祖先。
【解决方案】
web端: 将 filter 设置在 html 上即可。
小程序:需逐个元素排查,确保设置了 filter 的元素,不包含存在 fixed 定位的子元素。
2、配置了 css filter 属性的元素,z-index会被提升,可能会覆盖掉其他有定位元素
【解决方案】
注意调整 z-index 层级。