iOS18 Safari中safe-area-inset-bottom问题求助：固定底部导航被遮挡

目前不少开发者都遇到了iOS18初期版本Safari的这个bug：地址栏自动展开时，safe-area-inset-bottom的计算会出现异常，导致固定在底部的导航栏被遮挡，iOS17及之前版本不存在该问题。以下是几个实测有效的解决方案：

• 监听视觉视口变化手动修正内边距
  利用window.visualViewport的resize事件实时监测视口高度变化，手动计算并调整底部元素的padding-bottom值，确保元素始终处于安全区域内：

  const adjustBottomNav = () => {
    const bottomNav = document.querySelector('.fixed-bottom-nav');
    if (!bottomNav) return;
    const viewportHeight = window.visualViewport.height;
    const docClientHeight = document.documentElement.clientHeight;
    // 计算地址栏展开后额外占用的高度
    const extraBottomSpace = Math.max(0, docClientHeight - viewportHeight);
    // 保留原有padding-bottom，加上额外高度
    const originalPadding = parseInt(getComputedStyle(bottomNav).paddingBottom) || 0;
    bottomNav.style.paddingBottom = `${extraBottomSpace + originalPadding}px`;
  };
  
  // 绑定事件监听
  window.visualViewport?.addEventListener('resize', adjustBottomNav);
  // 页面初始化时执行一次
  adjustBottomNav();
  

• 改用position: sticky替代fixed（布局允许时优先）
  如果页面布局支持，将底部导航的定位方式从fixed改为sticky，设置bottom: 0，Safari会更准确地处理其与安全区域的适配，避免地址栏变化时的遮挡：

  .bottom-nav {
    position: sticky;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff; /* 确保背景覆盖下方内容 */
    z-index: 100;
  }
  

• 规避地址栏自动展开（临时方案）
  让页面最小高度设置为视口高度的120%左右，减少地址栏自动展开的触发场景，适合内容较少的页面：

  body {
    min-height: 120vh;
  }
  

内容的提问来源于stack exchange，提问作者Taylor Chance