iOS Safari中为何容器滚动条会渲染在position:sticky元素下层？

在配置了 overflow-y: auto 属性的滚动容器内使用 position: sticky 定位时，会出现容器垂直滚动条被渲染在sticky元素后方的层级错位问题。从界面效果可以看到，序号为1、2、3、4的sticky元素会覆盖在滚动条上层，遮挡滚动条的正常显示。

如果移除滚动容器上配置的 height: 100vh; overflow-y: auto 样式，改为依赖浏览器默认的body元素实现全局页面滚动，上述层级异常就会完全消失。

可复现代码 #

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        .container {
            height: 100vh; 
            overflow-y: auto;
            background-color: lightblue;
        }
        .stickyHeader {
            position: sticky;
            top: 0;
            background-color: #eee;
            height: 40px;
        }
        .item {
            height: 200px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="container">
        <div class='stickyHeader'>1</div>
        <div class="item"></div>
        <div class='stickyHeader'>2</div>
        <div class="item"></div>
        <div class='stickyHeader'>3</div>
        <div class="item"></div>
        <div class='stickyHeader'>4</div>
        <div class="item"></div>
        <div class='stickyHeader'>5</div>
        <div class="item"></div>
    </div>
</body>
</html>

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