平常小记 - 排查VUX Search组件 fixed定位失效

问题

移动端项目一直使用VUX来开发，以前使用里面的Search组件作过一些二次封装的组件，最近发现Search组件内部的默认插槽，本来是fixed定位，在手机上打开是好的，可是在浏览器的模拟器打开竟然失效了。

缘由排查

首先上google查到了，常见的fixed定位失效的主要缘由

fixed 属性会建立新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改成该祖先。

见MDN position: fixed

好的，查到了主要问题，接下来咱们来看看，是否是这个缘由致使的

在VUX的Search组件中，咱们找到了外层容器.vux-search-fixed的样式中，有一个backdrop-filter属性

.vux-search-fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(5px);
}
复制代码

OK，咱们尝试着把这个backdrop-filter属性取消掉，诶，fixed定位又铺满整个窗口了。

咱们再来看下这个backdrop-filter属性的兼容性

兼容性并非很好，目前须要chrome76以上才生效。

以前fixed定位正常显示，是因为以前浏览器没有支持这个backdrop-filter属性。

由此能够肯定就是父元素的这个backdrop-filter属性,致使fixed定位的子元素，不在是相对于屏幕视口（viewport）,而是相对于带有这个backdrop-filter属性的父元素定位了。

复现地址

codepen.io/eJayYoung/p…

复现步骤

1. 在最新版本chrome（目前个人是 80.0.3987.149（正式版本） （64 位））打开codepen连接
2. 因为最新版chrome浏览器默认支持backdrop-filter属性，因此能够看到内部fixed定位的子元素child会相对于设置了backdrop-filter属性的父元素parent定位，而不是屏幕视口(viewport)

   

3. 把parent元素的backdrop-filter属性注释，便可看到child元素会基于viewport定位，铺满整个视口

   

4. 在最新的firefox里打开此连接，因为没有支持backdrop-filter属性，因此fixed不会失效

   

解决方案

把父容器的backdrop-filter属性去掉就好

毕竟保证布局一致性的优先级确定是高于这种纯属滤镜的美化样式

已经给VUX提好了issue

参考连接

1. developer.mozilla.org/zh-CN/docs/…
2. caniuse.com/#search=bac…