iPhone端Edge与Safari浏览器页面渲染差异问题排查

编写了如下代码后，在iPhone的Edge与Safari浏览器中出现了表现差异：期望页面滚动时，即使动态工具栏收缩，header的高度也保持不变——这一点在Safari中符合预期，但在Edge中，header和section会改变高度以填满整个视口。尝试使用lvh和svh单位后，该异常表现仍未改善。请问这是什么原因？

补充说明：初始打开页面时，“Example”文本使用百分比尺寸；当向下滚动页面后，对应header的黑色区域变大，百分比尺寸的文本也随之放大，其他百分比尺寸的内容也会出现同样情况。

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <title>Example</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="background"></div>
        </header>
        <section>
            <div class="container">
            </div>
        </section>
    </body>
</html>

CSS 代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}

html{
    background-color: #151515;
}

body{
    font-family: 'Poppins', sans-serif;
}

header{
    width: 100%;
    height:  100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 0;
}

.background{
    position: absolute;
    background-color: #151515;
}

section{
    position: relative;
    height:100vh;
}

.container{
    width: 100%;
    height: 100%;
    background-color: #CE3003;
}

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