把网页 App 磨出原生手感

iOS WKWebView / 移动端 Web 的 15 个手感坑，和一晚上 debug 出来的解法。

我们家有一个装在 WKWebView 壳里的自建 app。功能都好好的，但手感处处差半口气：键盘弹起来界面慢半拍、点编辑屏幕猛跳一下、抽屉开关会闪、动画时不时抽风。一晚上连发八个版本把它们全钉死之后，把每个坑的症状、真凶、解法整理成这份清单——都是通用问题，不绑定任何框架，代码可以直接抄。

读法：按你眼睛看到的症状找对应的坑。每一坑 = 你会看到什么 → 真凶是谁 → 怎么修。三个「方法论」比任何单个解法都值钱，建议先读。

没有壳、纯浏览器/PWA 的网页也适用吗？ 适用九成——列表跳动篇、动效篇 全部通用，键盘篇除坑 7 外通用（iOS Safari 的 innerHeight 一样不可信）。只有两处是壳专属：坑 7（键盘预告，纯网页够不到，这是网页手感的天花板）和坑 14（confirm 被吞）。读完坑 7 你也就知道了自己什么时候值得包一个壳。

---

目录

• 一、键盘篇：坑 1–7 + 方法论 A（真机探针）
• 二、列表跳动篇：坑 8–12 + 方法论 B（窃听 scrollTop）
• 三、动画细节篇：坑 13–15 + 零碎
• 附：为什么网页手感总差半口气

🪶 姊妹篇 动效篇 motions.md：这篇治病（跳/闪/卡），那篇造美——左缘滑动返回全套、底部抽屉开合、列表删除收拢、开书与 3D 翻页、推入转场、进场纪律。

🆕 续篇 2.0：从治病到防疫——又两周血账：开屏三段接力、乐观更新与墓碑、流式交接、长列表不白屏、壳网分工（网页治不了的病），坑 16–40 + 四张「出生清单」。

---

一、键盘篇

坑 1：键盘弹起，直接盖住输入框

症状：键盘出来了，底部输入条被埋在键盘底下。

真凶：iOS 里键盘弹起时，100vh/100dvh 布局的页面不会缩——layout viewport 不变，只有 visualViewport 变小。你的"全屏容器"还是全屏，底部自然被键盘压住。

解法：监听 visualViewport 的 resize，键盘出现时把根容器锁到可视高度（行内 !important 压过样式表），收起时还原：

const vv = window.visualViewport;
function fit() {
  const el = document.querySelector('.app-root');
  const kb = /* 键盘高度，见坑 2 */;
  if (kb > 60) {
    el.style.setProperty('height', Math.round(vv.height) + 'px', 'important');
  } else {
    el.style.removeProperty('height');
    if (window.scrollY) window.scrollTo(0, 0); // iOS 收键盘爱把 body 滚走半截不还，必须钉回
  }
}
vv.addEventListener('resize', fit);
vv.addEventListener('scroll', fit);

注意最后那行 scrollTo(0,0)：iOS 收键盘（尤其输入框被整个卸载时）经常把 body 滚走半截不还原，漏了这一钉，整个 app 会卡在半屏。

---

坑 2：键盘明明出来了，代码却认为"没有键盘"

症状：有时键盘起来了，界面却纹丝不动，过几百毫秒才猛跳到位；或者莫名闪现几次。

真凶：判定键盘的经典写法是 window.innerHeight - visualViewport.height > 阈值。但有些壳（WKWebView）在键盘弹出的瞬间会把 window.innerHeight 也临时抽成键盘后的高度——两个数一减等于 0，判定被骗过，随后 innerHeight 又悄悄恢复。我们用真机探针（方法论 A）抓到的现场：visualViewport.height 956→610 的同一毫秒，innerHeight 也是 610，几百毫秒后才回 956。

解法：不要信 window.innerHeight 的瞬时值。开屏时记一个全高基准，此后一切判定都用它：

let fullH = window.innerHeight;           // 开屏定盘
function kbGap() {
  // 无键盘迹象时校准基准（转屏也走这条；键盘开着时 vv 缺口 > 60，进不来）
  if (vv.height > fullH - 60) fullH = Math.max(vv.height, window.innerHeight);
  return fullH - vv.height;               // 这才是可信的键盘缺口
}

---

坑 3：键盘先起