综合开发

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

微信扫一扫,分享到朋友圈

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

移动端项目一直使用 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

了解发布订阅模式之后,vue响应式原理竟如此简单!

上一篇

console.log(typeof typescript === 'javascript' ) --- 浅谈typescript

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

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

长按储存图像,分享给朋友