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

1,175 阅读2分钟

问题

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

原因排查

首先上google查到了,常见的fixed定位失效的主要原因

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

见MDN position: fixed

好的,查到了主要问题,接下来我们来看看,是不是这个原因导致的

VUXSearch组件中,我们找到了外层容器.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…