iPhone端Telegram WebView应用键盘触发页面滚动异常问题求助

核心原因分析 #

该问题源于iOS键盘弹出时的视图调整逻辑与Telegram WebView的渲染机制冲突，和浏览器默认行为的差异导致了聚焦输入框时的滚动卡顿，仅在iPhone设备上触发。

具体修复方案 #

1. 锁定视口缩放避免布局强制调整 #

添加meta标签固定视口属性，阻止WebView因键盘弹出自动缩放页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 手动控制聚焦时的页面滚动 #

通过JS监听输入框聚焦事件，主动调整滚动位置，规避WebView自动调整带来的卡顿：

const targetInput = document.querySelector('input');
targetInput.addEventListener('focus', () => {
  setTimeout(() => {
    window.scrollTo({
      top: targetInput.offsetTop - 20,
      behavior: 'smooth'
    });
  }, 100);
});

3. 优化页面滚动行为的CSS设置 #

针对iOS触摸滚动特性，调整页面的滚动相关样式，减少冲突：

body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

4. 排查重绘/回流触发点 #

检查输入框聚焦时是否有不必要的DOM操作或CSS动画：

• 移除聚焦状态下非必需的box-shadow、transform等属性动画
• 对滚动容器添加will-change: scroll-position，提示浏览器提前优化

验证方式 #

在iPhone的Telegram WebView中测试修复后的页面，聚焦输入框观察滚动状态；同时确认浏览器及Android设备的原有正常表现不受影响。

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