Safari后台重启后页面内容上移的布局问题求助

问题现象 #

• 首次加载网站时Safari布局正常，无偏移
• 将Safari切到后台再重新打开，无论手动还是自动重载页面，内容都会向上偏移
• 手机旋转为横屏再切回竖屏可临时恢复正常布局

修复方案 #

这个问题是Safari在后台运行时，对视口高度和安全区域变量的计算出现异常导致的。结合你的代码，可通过以下步骤修复：

1. 调整CSS布局逻辑 #

移除冗余的绝对定位和错误的视口高度计算，改用更稳定的视口单位和安全区域适配：

html {
  height: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: 'Titillium Web', sans-serif;   
  min-height: 100svh; /* 使用svh确保小视口高度稳定，不受浏览器工具栏影响 */
  margin: 0;
  overflow: hidden;
  padding-top: env(safe-area-inset-top); /* 正确适配顶部安全区域 */
}

main {
  background-image: url(/bg.jpg);
  background-position: center;
  background-size: cover; 
  display: flex;
  color: white;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;      
  transition: top .3s;
  min-height: calc(100svh - env(safe-area-inset-top)); /* 减去顶部安全区域高度，避免内容被挤压 */
  width: 100%;
}

2. 添加JavaScript监听，强制修正布局 #

监听页面可见性变化，当页面从后台回到前台时强制触发重绘，修正Safari的计算错误：

<body>
    <main>
        <h1>Website Name</h1>
        <img src="/logo.png">
        <div id="txt">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Praesent tristique magna sit amet. Ultrices mi tempus imperdiet nulla. 
        </div>  
        <div id="btns">
            <div>Button 1</div>
            <div>Button 3</div>
            <div>Button 2</div>
            <div>Button 4</div>
        </div>
    </main>
    <script>
        // 页面从后台回到前台时触发重绘
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden) {
                // 临时修改高度触发重绘，再恢复原高度
                document.body.style.minHeight = 'auto';
                requestAnimationFrame(() => {
                    document.body.style.minHeight = '100svh';
                });
            }
        });

        // 窗口大小变化时确保布局正确
        window.addEventListener('resize', () => {
            document.body.style.minHeight = '100svh';
        });
    </script>
</body>

关键修改说明 #

• 使用svh（Small Viewport Height）：该单位会忽略浏览器的动态工具栏高度，确保视口高度计算始终稳定，避免布局跳动
• 移除绝对定位：改用流式布局配合padding-top处理安全区域，减少定位冲突导致的偏移
• 可见性监听：解决Safari后台时视口计算异常的问题，页面重新可见时强制刷新布局，自动修复偏移

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