React Web App移动端Chrome浏览器背景图片尺寸异常求助

在Chrome移动端浏览器中，React Web App的全屏背景图片出现异常：初始显示正常，但点击顶部地址栏打开最近搜索列表，收起键盘后仅显示搜索列表，再滑动返回页面时，背景图片会被放大；触摸屏幕释放后恢复正常。

复现代码 #

React组件代码 #

function App() {
  return (
    <>
      <div className="background-container">
      </div>
    </>
  )
}
export default App

CSS样式 #

.background-container{
  background-image: url("./assets/background.webp");
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;  
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

问题原因分析 #

• 点击地址栏显示最近搜索列表时，设备会调整window.innerHeight以适配搜索面板高度
• 返回页面后，设备仍沿用调整后的高度值，导致背景图片被拉伸放大
• 触摸结束事件会触发浏览器重新校准窗口尺寸，自动修复图片显示问题

已尝试但无效的方案 #

• 监听resize、blur、focus事件：事件触发时机正确，但获取的clientHeight和window.innerHeight值不准确，无法正确设置容器高度
• 模拟touch/touchend事件：浏览器拒绝非可信事件，方案无效
• 触发滚动事件：滚动再回滚无法触发重渲染和高度重新计算
• 临时控制组件条件渲染：通过定时器关闭再开启组件，未解决问题
• 使用dvh单位：测试后无效

可行解决方案 #

方案1：监听视觉视口变化，强制触发重绘 #

利用visualViewport的resize事件，能精准捕捉移动端视口的真实变化（比如地址栏、键盘导致的视口调整），触发容器重绘让浏览器重新计算背景尺寸：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleViewportResize = () => {
      const container = document.querySelector('.background-container');
      if (container) {
        // 通过临时修改样式触发重绘
        container.style.transform = 'scale(1)';
        void container.offsetWidth; // 强制浏览器重排
        container.style.transform = '';
      }
    };

    window.visualViewport?.addEventListener('resize', handleViewportResize);
    
    return () => {
      window.visualViewport?.removeEventListener('resize', handleViewportResize);
    };
  }, []);

  return (
    <>
      <div className="background-container">
      </div>
    </>
  )
}
export default App

同时调整CSS，移除冗余的height:100vh（top:0;bottom:0已能让容器占满全屏，避免高度冲突）：

.background-container{
  background-image: url("./assets/background.webp");
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;  
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

方案2：改用position: fixed定位 #

固定定位的元素始终基于视口定位，不受地址栏变化导致的文档流高度影响，从根源避免视口调整带来的尺寸计算错误：

.background-container{
  background-image: url("./assets/background.webp");
  position: fixed; /* 替换为fixed */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;  
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

方案3：页面聚焦时延迟重置背景尺寸 #

在页面重新获得焦点后，延迟触发背景尺寸重置，等待浏览器完成视口校准：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleFocus = () => {
      setTimeout(() => {
        const container = document.querySelector('.background-container');
        if (container) {
          // 重置background-size触发重新计算
          container.style.backgroundSize = 'auto';
          void container.offsetWidth;
          container.style.backgroundSize = 'cover';
        }
      }, 100); // 延迟时间可根据实际情况调整
    };

    window.addEventListener('focus', handleFocus);
    return () => {
      window.removeEventListener('focus', handleFocus);
    };
  }, []);

  return (
    <>
      <div className="background-container">
      </div>
    </>
  )
}
export default App

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