文本使用滤镜以后固定定位会失效，这应该是bug了吧？
收藏
回答
置顶fixed 会失效使用filter: grayscale(100%);？精选热门
陈小陈2020-04-03
| 框架类型 | 问题类型 | 终端类型 | 微信版本 | 基础库版本 |
|---|---|---|---|---|
| 小程序 | Bug | 微信iOS客户端 | 7.0.0 | 2.9.2 |
5 个回答
请 登录 后发表内容
相关问题
相关文档
- 会话回放: 小程序/数据/体验分析/使用指引/会话回放
- AggregateCommand.filter:: 小程序/开发/云开发/开发者资源/SDK 文档/数据库/Command/聚合操作符 $/数组操作符/filter
- 会员卡组件: 小程序/开发/平台能力/商业能力/卡券/会员卡组件
- AggregateCommand.filter:#参数: 小程序/开发/云开发/开发者资源/SDK 文档/数据库/Command/聚合操作符 $/数组操作符/filter
- AggregateCommand.filter:#API 说明: 小程序/开发/云开发/开发者资源/SDK 文档/数据库/Command/聚合操作符 $/数组操作符/filter
MDN文档有写，你这里加了filter，容器由视口变为该祖先
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
fixed元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
fixed属性会创建新的层叠上下文。当元素祖先的transform,perspective或filter属性非none时，容器由视口改为该祖先。每个fixed元素css单独加filter: grayscale(100%)
其他的元素css用一个样式包起来加filter: grayscale(100%)完美解决
没有fixed元素的页面，直接在page下加上filter: grayscale(100%)即可
同问
同出现问题 加上滤镜 position:fixed失效
麻烦提供能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
width: 100%;
height: 300vh;
}
view,
text {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100upx;
height: 200upx;
background-color: #000;
word-wrap: break-word;
word-break: break-all;
filter: grayscale(100%);
}
你新建一个这样的页面就可以复现了