css filter 的坑

【背景】

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

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

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

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

【原因】

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

【解决方案】

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

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

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

【解决方案】

注意调整 z-index 层级。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容