移动端Firefox中bottom为0的fixed定位元素被遮挡如何修复

移动端Firefox触发网页音频播放后，会在视口最上层叠加系统级的原生音乐播放浮层。这个组件独立于页面Web渲染逻辑存在，既不会在CSS初始视口计算中预留占位空间，也不会触发传统的视口尺寸变更事件，导致常规设置position: fixed; bottom: 0的元素，会刚好和原生浮层位置完全重叠，被直接遮挡。

• 基于visualViewport API做动态适配
  原生浮层弹出时，Web页面的实际可视区域边界会通过visualViewport对象暴露尺寸偏移值。通过监听该对象的resize事件，实时计算浮层占用的高度，动态调整固定底部元素的bottom值即可避免遮挡，核心参考代码：

  // 选中需要适配的底部固定元素
  const bottomFixedEl = document.querySelector('.target-fixed-element');
  if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', () => {
      // 计算原生浮层占用的纵向高度差
      const occupiedHeight = window.innerHeight - window.visualViewport.height - window.visualViewport.offsetTop;
      // 给固定元素设置对应偏移，确保不被遮挡
      bottomFixedEl.style.bottom = `${Math.max(0, occupiedHeight)}px`;
    })
  }
  

• 增加固定高度的兜底逻辑
  移动端Firefox的原生音乐浮层高度基本稳定在58-64px区间，可以给底部固定元素默认设置bottom: 60px的初始值，再配合上面的动态监听做微调，避免首次触发播放时，元素还没来得及计算偏移就被遮挡。
• 同步调整页面滚动容器的内边距
  固定栏适配的同时，给页面主滚动容器设置和固定栏高度匹配的padding-bottom，避免浮层弹出时，页面最底部的正文内容也被原生浮层遮挡。

内容的提问来源于stack exchange，提问作者Farzaneh Torkpichlou