让页面变灰是敏捷需求。作为研发，我们自然要尽快跟进。由于各大平台的跟进速度都非常快，所以这是给我们的。它一定很简单。领导问我要多久才能搞定。我满怀期待地说，5分钟内搞定。要想达到相应的效果，最好的办法就是借鉴百度的分析。它仍然非常快。整个页面达到了我们想要的效果。分析一下具体增加了哪些内容？consoleview的本质是增加了一个big-event-gray类。那么这个类的具体内容是什么呢？身体{过滤器：progid：DXImageTransform.Microsoft.BasicImage（灰度=1）;-webkit-过滤器：灰度（100%）；-moz-过滤器：灰度（100%）；-ms-过滤器：灰度（100%）；-o-过滤器：灰度（100%）；filter:grayscale(100%);}filter主要是给元素添加滤镜效果，grayscale函数可以改变图像的灰度，取值范围0-1，0表示图像没有变化,1表示图像或元素完全灰度化，其余为一些兼容方案。执行确实OK。将这段内容添加到我们自己项目中的html中，发现没有问题，完美领导看到了，直接调用大师，说好，既然这么快，我们还有个小程序，就这样吧补充一下，一小时够了，心想，一小时？太多了，10分钟就够了，改代码1分钟，上线4分钟，钓鱼5分钟，道理一样，应该没问题，既然html中加了H5，同样我把小程序添加到页面了领导大概会被我的速度之快折服吧，升职加薪指日可待。由于产品app不便截图，我将以demo为例进行分析。这是我们的小程序页面。我想让整个颜色变灰。按照我们刚才说的方法，在app.wxss页面添加如下内容{filter:grayscale(1);}直接起飞，上线，暗自得意，我太优秀了，问题出乎我意料的时候一上来，群里立马炸开了锅，说线上小程序有问题。我还在想，有什么问题吗？肯定有问题，颜色不一样，但是看了商家的截图，发现事情并没有想象的那么简单，不是颜色的问题，而是排版乱了，有很大的bug上线了，打开我优惠券的弹窗，直接就在页面上了，原本看不到的商品评论就出来了。优惠券列表中的优惠券中心也有一个按钮，废话少说，快速回滚，就恢复正常了。为什么它不能工作？回滚结束后，就该查找原因了。从小程序的表面来看，这些内容确实没有问题，但是有些特殊的地方是有问题的。结合这些有问题的点，我发现在小程序中，只要使用固定的地方，就会出现问题。出现问题怎么办？？先去社区看看有没有答案。搜索了一下，发现还真有解决办法。既然是批次有问题，那单个就没有问题。我们将此css添加到其中一个元素。确实是没问题，但是工作太多了，不可能把所有的都加进去，于是我看了一下美团小程序，发现他们只把一部分灰掉了。这确实是一个解决方案，但根本原因是什么？我们看了fixedmdn上的解释，fixed元素会被移出正常的文档流，并没有为元素保留空间，而是通过指定元素相对于屏幕视口的位置来指定元素的位置（视口）。滚动屏幕时元素的位置不会改变。打印时，该元素会出现在每一页的固定位置。fixed属性创建一个新的堆叠上下文。当元素的祖先具有非无转换、透视或过滤器属性时，容器将从视口更改为该祖先。有一点需要注意的是，当元素的祖先的filter属性不是none时，容器从视口变为祖先。因此，固定状态存在问题。小程序中的定位是基于页面的。如果页面高度为100%，只有整个屏幕的高度会导致向下滚动时底部吸力向上运行。在处理一长串小程序的时候，在添加filter:grayscale(1)的时候，不要给每个Item添加，这种方式是极其耗性能的。这个时候在IOS16性能下页面会卡顿，所以设置这个属性的时候一定要注意。父元素小程序的最佳解决方案是这样，在小程序中添加一个新的root-portal。基础库2.25.2之后，可以将子树从页面中分离出来，没有对应的祖先元素。解决方法是在小程序中的HTML中添加对应的灰色属性。最好不要全局添加。如果要加，要看项目是否使用fixed。您可以尝试在小程序中使用它，只需将其添加到相应的元素即可。根门户视图容器
