移动端点击Material UI TextField登录后页面顶部内容被截断求助

问题现象 #

登录页面使用Material UI TextField，点击输入并完成登录后，页面被向下推送，顶部内容被截断；已排查排除容器100vh的影响，针对宽度小于450px的屏幕将高度改为80vh后仍未解决，登录后页面无法恢复正常状态。

相关容器CSS代码：

.app-container .unauthorised-view,
.not-found-view,
.login {
  width: 100%;
  height: 100vh;
  background-image: url('../../public/static/media/bg_unauth.jpg');
  background-size: contain;
  background-position: center center;
  background-color: #ededed;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

可行解决方向 #

1. 用动态视口高度替代固定vh #

移动端键盘弹出会改变可视区域高度，100vh无法自动适配这种变化，换成100dvh（动态视口高度）可以让容器高度随视口实时调整：

.app-container .unauthorised-view,
.not-found-view,
.login {
  width: 100%;
  /* 替换100vh为动态视口高度，同时设height为auto避免固定高度限制 */
  min-height: 100dvh;
  height: auto;
  background-image: url('../../public/static/media/bg_unauth.jpg');
  background-size: cover;
  background-position: center center;
  background-color: #ededed;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

2. 登录成功后强制复位页面状态 #

在登录成功的回调逻辑里，添加代码清除输入框焦点并将页面滚动到顶部，强制触发布局重绘：

// 假设用useRef绑定TextField
const loginInputRef = useRef(null);

const handleLoginSuccess = () => {
  // 清除输入框焦点
  loginInputRef.current?.blur();
  // 滚动到页面顶部
  window.scrollTo(0, 0);
  // 触发页面重绘
  document.body.offsetHeight;
};

3. 检查组件切换时的布局清理 #

如果登录后是切换到授权页面，确认Login组件是否被正确卸载，或者是否有残留的固定定位元素、全局样式污染了新页面的布局。

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