React项目中Mobile Safari地址栏滚动时无法收缩问题排查

问题根源 #

Mobile Safari的地址栏收缩逻辑仅针对浏览器原生的窗口滚动（即window/html/body元素的滚动），你的代码存在两个关键问题：

1. 所有根元素（html/body/#app/#root）都设置了height: 100%，把页面高度固定在当前视口高度，内容无法超出视口，浏览器不会触发原生滚动。
2. #root设置了overflow: hidden，将滚动行为转移到自定义的ContentContainer容器，这种自定义滚动不会触发Safari的地址栏收缩机制。

解决方案 #

1. 恢复浏览器原生滚动能力

修改App.css，将根元素的固定高度改为min-height: 100vh，并移除#root的overflow: hidden：

html {
  min-height: 100vh; /* 去掉height:100%，允许高度随内容扩展 */
}

body {
  font-family: 'Work Sans', 'Courier New', sans-serif;
  min-height: 100vh;
  margin: 0px;
}
#app {
  min-height: 100vh;
}

#root {
  min-height: 100vh;
  display: flex;
  /* 移除overflow: hidden，让浏览器能触发原生滚动 */
  box-sizing: border-box;
}

2. 调整自定义容器样式，移除内部滚动

修改ContentContainer的样式，去掉固定高度和内部滚动设置：

const ContentContainer = styled.div`
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少占满视口高度 */
  /* 移除height:100%和overflow-y:auto */
`;
const ScrollContainer = styled.div`
  flex: 1;
`;

特殊场景说明 #

如果布局必须保留自定义滚动容器（比如存在固定定位的头部/尾部），Mobile Safari目前对该场景的地址栏收缩支持有限。可尝试监听滚动事件手动调整视口，但体验不如原生滚动流畅，优先推荐上述原生滚动方案。

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