问题
移动端项目一直使用VUX
来开发,之前使用里面的Search
组件做过一些二次封装的组件,最近发现Search
组件内部的默认插槽,原本是fixed
定位,在手机上打开是好的,但是在浏览器的模拟器打开居然失效了。
原因排查
首先上google查到了,常见的fixed
定位失效的主要原因
fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。
好的,查到了主要问题,接下来我们来看看,是不是这个原因导致的
在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
属性的父元素定位了。
复现地址
复现步骤
- 在最新版本chrome(目前我的是 80.0.3987.149(正式版本) (64 位))打开codepen链接
- 由于最新版chrome浏览器默认支持
backdrop-filter
属性,所以可以看到内部fixed
定位的子元素child
会相对于设置了backdrop-filter
属性的父元素parent
定位,而不是屏幕视口(viewport) - 把
parent
元素的backdrop-filter
属性注释,即可看到child
元素会基于viewport定位,铺满整个视口 - 在最新的firefox里打开此链接,由于没有支持
backdrop-filter
属性,所以fixed
不会失效
解决方案
把父容器的backdrop-filter
属性去掉就好
毕竟保证布局一致性的优先级肯定是高于这种纯属滤镜的美化样式
已经给VUX
提好了issue