GatsbyJS渐进式Web应用中iPhone用户无法输入邮箱及密码的问题求助

排查需收集的关键信息 #

• 故障复现涉及的iPhone具体机型、iOS系统版本：不同iOS版本对WebKit内核的输入交互逻辑调整较多，尤其是iOS 14及以上版本的兼容差异是定位这类问题的核心依据
• 复现场景分类：需要区分是将PWA添加到主屏幕后以独立全屏模式打开时出问题，还是直接用Safari浏览器访问站点时就无法输入
• 全局输入框相关配置：确认是否给input元素或其父容器设置了pointer-events: none、user-select: none样式，是否存在上层透明元素遮挡输入框视觉区域、实际触摸点未落在input可交互范围内的情况
• 远程调试结果：通过Safari Web Inspector连接故障设备，查看点击输入框时是否触发聚焦事件、是否有全局JS脚本对input的focus事件或触摸事件绑定了preventDefault拦截逻辑
• 对照测试结果：在同设备的Safari中打开纯静态无框架的同类型input页面，确认基础输入能力是否正常，排除设备本身的输入权限配置问题

针对性排查方向 #

• 核对PWA相关配置：检查gatsby-plugin-manifest的配置项，确认是否存在viewport配置异常、全屏模式设置错误的问题，这类问题常会导致iOS下触摸交互坐标偏移，视觉上点击了输入框但实际落在了非交互区域，表现为无法输入
• 适配iOS WebKit的input特殊逻辑：iOS对type="email"、type="password"类输入框的自动填充逻辑有特殊处理，缺少必填关联属性时可能出现自动填充流程拦截手动输入的问题，可补充标准属性后验证：

  <input type="email" name="email" autoComplete="email" placeholder="email" />
  <input type="password" name="password" autoComplete="current-password" placeholder="password" />
  

• 全局触摸事件排查：检查项目中是否存在无差别绑定在document上的touchstart/touchend事件，这类事件如果未针对输入框目标做排除，在iOS下会拦截输入框的原生聚焦触发，导致无法唤起键盘输入

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