本文介绍如何通过 css 变量与滚动控制，修复 telegram web view（ios）中软键盘弹出时覆盖底部 textarea 的典型兼容性问题。
在 Telegram Web View 中，尤其是在 iOS 设备上（如 iOS 16.1.2 + Telegram 9.3.2），当用户聚焦于底部 <textarea> 或 <input> 元素时，系统软键盘常会直接覆盖输入区域，导致无法查看输入内容或实时预览——这是由 Telegram iOS 客户端对 viewport 高度计算异常及 Web View 内部滚动机制限制所致。
根本原因在于：Telegram Web View 并未正确更新 window.innerHeight 或触发 resize 事件，且其内部 viewport 高度在键盘展开后未动态收缩，导致绝对定位的输入框“沉入”键盘下方。
✅ 推荐解决方案（经实测有效）：
为根容器（如 .container）应用以下 CSS，利用 Telegram 提供的自定义 CSS 变量 --tg-viewport-stable-height（表示键盘收起时的稳定视口高度）：
.container {
overscroll-behavior-x: none;
overscroll-behavior-y: none;
height: var(--tg-viewport-stable-height, 100vh);
min-height: var(--tg-viewport-stable-height, 100vh);
}⚠️ 注意：--tg-viewport-stable-height 是 Telegram Web App SDK 注入的原生 CSS 变量，仅在 Telegram Web View 环境中可用，无需额外引入 SDK 即可生效。
同时，需配合 JavaScript 强制重置页面滚动位置，防止因键盘唤起导致容器内滚动偏移：
// 在 input/textarea focus 时执行（建议节流）
document.querySelector('textarea').addEventListener('focus', () => {
// 确保焦点元素可见（尤其对绝对定位元素）
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
});? 进阶提示：
- 若使用 Vue/React 等框架，建议在 mounted / useEffect 中监听 focusin 事件，并结合 ResizeObserver 监听 --tg-viewport-stable-height 变化（需配合 getComputedStyle 轮询，因该变量暂不触发 CSSOM 变更事件）；
- 避免依赖 window.innerHeight 或 visualViewport.height —— 在 Telegram iOS Web View 中二者均不可靠；
- 不要设置 body { position: fixed } 或禁用 overflow，这可能导致交互失灵或白屏。
? 当前该问题仍属 Telegram 官方未修复的已知缺陷（见 GitHub issue #1410、#1474、#1475），上述方案为社区验证的稳定 workarounds。建议将 .container 作为整个 Web View 的最外层包裹容器，并确保所有内容（含聊天消息列表与输入框）均在其内部布局，以保障高度计算一致性。
最后提醒：务必在真机 Telegram App 中测试（模拟器无法复现此行为），并始终将 textarea 的 position: absolute; bottom: 15px 与容器 height: var(--tg-viewport-stable-height) 联动使用，才能实现如预期所示的“键盘顶起输入框”视觉效果。
