别再被小程序全页变灰给坑了

让页面变灰，是个敏捷需求

作为研发的我们，自然要第一时间跟进，既然各大平台跟进速度都很快，这个对我们来说肯定简单的很领导问我多久能够搞定，我满怀期待地说，5分钟搞定为了实现对应效果，最好的办法就是借鉴

分析

百度还是很速度，整个页面已经达到我们想要的效果了

分析它具体加了哪些内容，控制台查看

其本质是加了一个big-event-gray的类，那这个类具体有哪些内容呢？

body{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);
} 

filter主要是给元素加上滤镜的效果，grayscale这个函数能够改变图像灰度，取值范围为0-1，0是图像没变化，1是图像或者元素完全灰度，其余的都是一些兼容方案

实施

确实是OK了，在我们自己的项目中的html上加上这个内容，发现也没有什么问题，并且很完美的上线了

领导看到了直呼高手，说不错不错，既然这么快，我们还有小程序，也给加上吧，一个小时够了吧

我心想，一个小时？太多了，10分钟就行了，1分钟改代码，4分钟上线，摸鱼5分钟

道理都一样，应该也没有什么问题，既然H5是加在了html上，同理那小程序我加在page上就行

领导们估计都要被我这迅猛的速度折服了，升职加薪指日可待

由于产品app不方便截图，以下我用demo进行实例解析

这是我们的小程序页面，想要整个颜色变灰，只需要按照我们刚才所说的方法，在app.wxss中添加如下内容即可

page {filter: grayscale(1);
} 

直接起飞，上线，心里暗自得意，我可太优秀了

问题

让我意想不到的事情来了，群里直接炸锅了，说线上小程序有问题了。我还在想，有问题？肯定有问题，颜色不一样了呗

但是我看业务的截图，发现事情并没有我想象的那么简单，不是颜色问题，而是布局乱了，线上大bug，我的领劵的弹窗点开直接在页面中了，本来不可见的商品评价都出来了

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc42c4977cf64e0496fcea58f52c997b~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)	" style=“margin: auto” />

还有优惠劵列表中有一个领劵中心的按钮，本来是吸底，现在直接在我的页面中了

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2de02ec758964b6580f16d412874ba2f~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)	" style=“margin: auto” />

当场吓得我魂都没了，二话没说赶紧回滚，才恢复正常

为什么不行

回滚完了，该找原因了。小程序从表面看这些内容确实没有问题，但是一些特殊的点都是有问题的

结合这些有问题的点，我发现在小程序中，只要使用了fixed的地方，都会出现问题

有了问题怎么办？先去社区看一下有没有答案，结果一搜，发现还真有

处理方案

那既然批量有问题，单个总没有问题吧，我们给其中的一个元素加上这段css，确实是没问题，但是这么大量的工作不可能全加，所以我看了美团小程序，发现他们也只是置灰了一部分，这确实是个解决方案

但是根本原因是因为什么呢？

我们看了fixed的mdn上的说明

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

其中有个说明，当元素祖先filter属性非none时，容器由视口改为该祖先，正式因为这个，导致fixed的地位有问题，小程序里面基于page进行的定位，如果page的高度为100%，只是整个屏幕的高度，就会导致往下滚动的时候，底部的吸底往上跑

额外内容

在处理小程序长列表的时候，添加filter: grayscale(1)的时候，不要给列表的每一个item添加，这种做法是极其耗费性能的，这个时候在IOS16表现下页面会卡死不动，所以我们在设置这个属性的时候一定要注意，给到父元素

小程序中最好的解决方法是这样的，小程序里面新增了一个root-portal，在基础库2.25.2后，它能够让子树从页面中脱离出来，也就没有对应的祖先元素的影响了

总结

1.在网页中，最好的方案是加到HTML上对应的置灰属性
2.在小程序中，最好不要给全局加，要加的话也要看项目中有没有使用fixed，只给对应的元素加上
3.小程序中可以尝试使用root-portal视图容器

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享