iOS 17中position:absolute元素的布局异常问题

在iOS 17系统中出现一处布局异常：.content元素会覆盖.header元素，导致渲染结果不符合预期。该问题在不同设备或浏览器中并非稳定复现。

对应的HTML和CSS结构如下：

<html>    
    <head>
        <meta name="viewport" content="initial-scale=1.0">
        <style>
            .page {
                position: absolute;
                height: 100%;
                width: 100%;
                overflow: auto;
            }
            .container {
                height: 100%;
                width: 100%;
                overflow: auto;
            }
            .header {
                position: absolute;
                top: 0;
                background: lightblue;
                height: 50px;
                width: 100%;
            }
            .content {
                height: 2000px;
                background: lightcoral;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="page">
            <div class="container">
                <div class="header">header</div>
                <div class="content">content</div>
            </div>
        </div>
    </body>
</html>

临时修复方案：

• 移除.page的overflow属性
• 设置.content不可滚动

采用上述任一方案后，.header即可正常覆盖.content。

更新：该问题已在iOS 17.2版本中修复，详情可参考苹果开发者论坛相关讨论线程。

内容的提问来源于stack exchange，提问作者Sonic.S.Xiang