平常小記 - 排查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…