Node.js+React项目部署Heroku后iPhone端登录后页面冻结如何排查

问题表现：NodeJS+React项目部署到Heroku后，桌面端、安卓端运行正常，iOS端完成登录操作后页面无法滚动、图片加载失败、按钮点击无响应。
你当前使用的核心CSS如下，其中就有iOS兼容的高风险写法：

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  border: none;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-light);
  color: var(--color-dark);
  overflow-x: hidden;
}

优先排查CSS兼容问题 #

• 移除body上的overflow-x: hidden属性。iOS Safari对body、html根元素的overflow属性解析逻辑和Chromium内核浏览器存在差异，登录后动态渲染首页DOM、更新页面结构时，该写法很容易触发滚动容器锁死、交互层错位的bug。把横向溢出限制移到React应用挂载的根节点（一般是id为root的div）上，给该节点设置width: 100vw; overflow-x: hidden; position: relative;即可。
• 排查全屏容器的高度单位。检查登录后渲染的页面、弹层组件有没有用100vh设置高度，iOS Safari的视口高度计算会包含底部工具栏，动态弹出/收回键盘时100vh的计算值会异常，导致出现透明层遮挡交互、页面无法滚动的问题。这类场景统一用height: 100%实现，同时给html、body、#root三个层级元素都设置height: 100%即可。
• 检查滚动容器属性。如果给滚动区域加了-webkit-overflow-scrolling: touch属性，必须给容器设置明确的固定高度/最大高度，否则在iOS上会出现滚动失效、点击无响应的问题。如果登录后有加载动画、过渡组件，可以给对应元素加transform: translateZ(0)触发GPU硬件加速，避免渲染线程阻塞，但不要全局给所有元素加该属性，防止内存占用过高反向导致卡顿。
• 检查遮罩层状态。确认登录成功后，全局loading、登录弹窗之类的fixed定位遮罩有没有被正确移除，iOS上如果React状态更新异常，透明的全屏遮罩会一直留在DOM树顶层拦截所有触摸、点击事件，表现和页面冻结完全一致。

其次排查JS运行时兼容问题 #

• 用Mac连接iPhone打开Safari开发者调试，查看登录操作触发后的控制台报错。重点检查有没有未被Babel转译的ES6+语法：比如可选链?.、空值合并??、顶层await这类语法，在版本较旧的iOS Safari上会直接抛出语法错误，导致React后续的事件绑定、渲染逻辑全部中断，而桌面端、安卓端因为Chrome内核原生支持这类语法就不会出问题。
• 排查API兼容问题。检查登录后初始化逻辑里有没有调用iOS Safari不支持的Web API，比如部分版本iOS不支持的navigator.clipboard、ResizeObserver的部分参数，这类API调用抛错也会中断后续逻辑。
• 排查资源加载问题。图片加载失败优先检查两个点：一是接口返回的图片地址是不是HTTP协议，Heroku默认部署为HTTPS环境，iOS的ATS安全策略会直接拦截HTTP资源加载；二是图片是不是用了WebP、AVIF等低版本iOS不支持的格式，加载失败后如果图片组件的onError回调写了死循环逻辑，会直接阻塞页面渲染。

排查iOS特有交互bug #

• 检查viewport配置。确认public目录下index.html的meta viewport配置正确，不要设置过大的initial-scale值，也不要随意加user-scalable=no属性，部分iOS版本下禁止缩放会导致输入框聚焦、键盘收回后页面缩放状态不回弹，直接锁死页面交互。
• 修复键盘回弹bug。登录操作一般会唤起键盘，键盘收回时iOS经常出现视口位置不复位的问题，表现为页面上半部分能点、下半部分点不动，滚动失效。可以在登录成功的逻辑末尾加window.scrollTo(0, 0)强制重置视口位置。
• 排查全局触摸事件。检查有没有在document、window上绑定touchstart/touchmove事件，且事件回调里无差别调用了e.preventDefault()，iOS上这类写法会直接阻断默认的滚动、点击行为。

排查部署缓存问题 #

• Heroku部署时如果静态资源的Cache-Control头配置不合理，iOS Safari会缓存第一次加载的不完整JS/CSS资源，即使重新部署也会加载旧的坏资源。可以在Heroku上触发一次重新build，给静态资源路径加内容hash，同时手动清除iOS Safari的全站缓存后再测试。

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