本文介绍如何通过 css 变量与滚动控制，修复 telegram web view（ios）中软键盘弹出时覆盖底部 textarea 的经典兼容性问题。
在 Telegram Web View 中，尤其是 ios 端（如 ios 16.1.2 + Telegram 9.3.2），当用户聚焦于底部
✅ 核心解决方案：利用 Telegram 提供的 css 自定义属性
Telegram Web apps 运行时会注入两个关键 CSS 自定义属性：
- –tg-viewport-stable-height：键盘收起时视口高度（即“稳定高度”，通常接近 window.innerHeight）
- –tg-viewport-stable-width：对应稳定宽度（本例中无需）
将容器高度绑定至 –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); }⚠️ 注意：
- overscroll-behavior-* 用于禁用 iOS 滚动回弹（防止键盘触发意外弹性滚动）；
- min-height 是冗余保护，确保在变量未注入时仍具备基础高度；
- 此方案必须作用于最外层容器（如
），而非仅 .chat 或 textarea 父元素。
? 补充修复：重置滚动位置
启用上述 CSS 后，部分场景下页面可能出现异常滚动偏移（尤其在键盘收起后）。此时需在 focus 或 input 事件中主动重置滚动：
document.querySelector('textarea').addEventListener('focus', () => { // 强制滚动到顶部，消除因键盘导致的视图偏移 window.scrollTo(0, 0); });更健壮的做法是监听 keyboardDidShow / keyboardDidHide（需配合 Telegram WebApp SDK）：
if (window.Telegram?.WebApp) { Telegram.WebApp.onEvent('keyboardDidShow', () => { window.scrollTo(0, 0); }); Telegram.WebApp.onEvent('keyboardDidHide', () => { window.scrollTo(0, 0); }); }? 注意事项与局限性
- 此方案为 Telegram iOS 特定 workaround，非 W3C 标准行为，未来版本可能变更；
- 不适用于所有 Telegram 客户端（android 和桌面版通常无此问题）；
- 若使用 position: fixed 或 transform 等复杂布局，需额外测试层级与定位兼容性；
- 当前官方仍未修复该问题，相关 issue 仍处于 open 状态（#1410, #1475）。
建议在项目中封装为可复用的初始化函数，并结合 @supports (height: env(safe-area-inset-bottom)) 做安全降级。只要合理组合 –tg-viewport-stable-height 与 window.scrollTo(0, 0)，即可在绝大多数 Telegram iOS 场景下实现输入框始终可见的体验。