收藏
回答

fixed 会失效使用filter: grayscale(100%);?

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 7.0.0 2.9.2


文本使用滤镜以后固定定位会失效,这应该是bug了吧?

回答关注问题邀请回答
收藏

5 个回答

  • Dexlux
    Dexlux
    2022-04-05

    MDN文档有写,你这里加了filter,容器由视口变为该祖先

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

    fixed

    元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transformperspective 或 filter 属性非 none 时,容器由视口改为该祖先。

    2022-04-05
    有用 2
    回复
  • Jacky
    Jacky
    2022-12-05

    每个fixed元素css单独加filter: grayscale(100%)

    其他的元素css用一个样式包起来加filter: grayscale(100%)完美解决

    没有fixed元素的页面,直接在page下加上filter: grayscale(100%)即可



    2022-12-05
    有用 1
    回复 2
    • 大熊
      大熊
      2023-10-27
      试了一下,真行,就是累人
      2023-10-27
      回复
    • Jacky
      Jacky
      2023-12-08回复大熊
      哈哈,是的,体力活,但是一般就几个首页这样搞
      2023-12-08
      回复
  • 大象
    大象
    2020-04-03

    同问

    2020-04-03
    有用 1
    回复
  • cocopang
    cocopang
    2020-04-04

    同出现问题 加上滤镜 position:fixed失效

    2020-04-04
    有用
    回复
  • 是小白啊
    是小白啊
    2020-04-03

    麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-04-03
    有用
    回复 3
    • 2020-04-03
      .box{
          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%);
        }

      你新建一个这样的页面就可以复现了
      2020-04-03
      回复
    • 夏天
      夏天
      2021-01-05
      请问现在有解决方案吗
      2021-01-05
      回复
    • 扬帆起航
      扬帆起航
      2022-04-27回复夏天
      你好,请问你是怎么解决这个问题的啊
      2022-04-27
      回复
登录 后发表内容
问题标签