React移动端Chrome页面加载时菜单位置异常问题求助

我用React JS开发时，在移动端Chrome浏览器遇到一个问题：输入localhost地址加载页面后，菜单停在屏幕底部（对应图“1st BUG ON LOAD PAGE”），这不是预期效果；但点击屏幕一次后，菜单会自动回到屏幕中间，这才是想要的效果。这是React应用里唯一出现此问题的组件。

相关代码 #

HTML（Header） #

Netfrics

CSS #

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: calc(100vw - 1px);
  font-family: sans-serif;
  background-color: vars.$background-color;
  user-select: none;
  user-select: unset;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

body,
#root,
.body {
  height: 100%;
}
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: -webkit-fill-available; /* 我试过用100% */
}

针对移动端Chrome的这个布局异常，试试下面几个实用方案：

• 统一高度单位，解决兼容性问题
  把.login的height: -webkit-fill-available替换为min-height: 100vh，同时完善根容器的高度设置：

  html, body, #root, .body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }
  .login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }
  

  100vh是标准视口高度单位，兼容性比-webkit-fill-available更稳定，能确保容器占满屏幕高度，让flex的垂直居中逻辑正常生效。

• 强制触发浏览器重绘修正布局
  在组件加载完成后手动触发一次重绘，修复初始布局计算错误。在React组件中添加：

  import { useEffect } from 'react';
  
  function LoginComponent() {
    useEffect(() => {
      const loginElement = document.querySelector('.login');
      if (loginElement) {
        // 通过短暂切换display触发重绘
        loginElement.style.display = 'none';
        requestAnimationFrame(() => {
          loginElement.style.display = 'flex';
        });
      }
    }, []);
  
    return (
      <div className="login">
        {/* 菜单内容 */}
      </div>
    );
  }
  

• 完善视口元标签设置
  确保HTML头部添加正确的视口配置，避免移动端适配导致的布局偏移：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

  viewport-fit=cover能让页面占满整个屏幕，排除安全区域对布局的干扰。

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