iOS 26 WKWebView中Liquid Glass工具栏与固定底部标签切换器重叠的解决方案咨询

阿华AIGC实验室

2026-4-2

各位好，我最近在iOS 26.x的WKWebView环境（比如Telegram、Discord这类APP的内置浏览器，还有自定义WebView应用）里测试我的网页应用时，遇到了一个头疼的问题：苹果新出的Liquid Glass悬浮工具栏总是和我固定在底部的标签切换器重叠。

之前我一直用bottom: env(safe-area-inset-bottom);来让UI避开iOS的系统工具栏/Home指示器，但在iOS 26的这些WebView里，这个属性返回的值完全不够用，新工具栏直接把我的标签切换器挡住了。

我现在急需解决两个核心问题：

获取一个准确的底部偏移量，让内容能完全避开这个新工具栏
找到可靠的方法检测这个Liquid Glass工具栏是否存在，这样我就能动态切换成悬浮式的标签切换器，避免重叠

我已经试过的方法

关于底部偏移量的尝试

我最先想到的还是依赖env(safe-area-inset-bottom)，但结果很不理想：

页面刚加载的时候，在WKWebView里这个值直接返回0
滚动一小段距离后数值会更新，但还是不够高，没法让标签切换器避开新工具栏

我甚至用WebKit官方的安全区域Demo测试，也遇到了同样的问题。这里我准备了一个最小可复现的代码片段，方便大家复现问题：

<!DOCTYPE html>
<html>
<head>
<script>
// 调试用的JS，可选
function updateMeter() {
  const v = getComputedStyle(document.documentElement).getPropertyValue('--safe-bottom') || '';
  const text = 'safe-area-inset-bottom: ' + (v.trim() || '0px');
  const m = document.getElementById('meter');
  if (m) m.textContent = text;
}
['load', 'resize', 'orientationchange', 'scroll', 'touchend'].forEach(ev => window.addEventListener(ev, updateMeter, { passive: true }) );
updateMeter();
</script>
<style>
:root {
  --safe-bottom: env(safe-area-inset-bottom);
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  height: 56px;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 999;
  backdrop-filter: blur(8px);
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  background: #f4f6f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* 调试用的CSS，可选 */
.content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px;
}
.box {
  height: 220vh;
  background: linear-gradient(180deg, #fff 0%, #eef3f8 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.tabbar .item {
  flex: 1 0 auto;
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
}
.meter {
  position: fixed;
  left: 12px;
  bottom: calc(56px + 20px);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
}
</style>
</head>
<body>
<main class="content">
  <div class="box">
    <h1>Scrollable page</h1>
    <p>
      滚动页面复现问题：固定的标签栏使用了<code>env(safe-area-inset-bottom)</code>属性。
    </p>
    <p>
      请在iOS 26及以上的WKWebView中打开（比如Telegram、WhatsApp、Discord的内置浏览器），就能看到工具栏重叠的情况。
    </p>
    <p style="margin-top:110vh">页面底部内容，用于测试滚动效果。</p>
  </div>
</main>
<div class="tabbar" role="tablist" aria-label="模拟标签切换器">
  <div class="item">Tab1</div>
  <div class="item">Tab2</div>
  <div class="item">Tab3</div>
</div>
<div class="meter" id="meter">safe-area-inset-bottom: unknown</div>
</body>
</html>