'Why scrollbar is behind sticky elements in iOS Safari?

When using position: sticky; in a container with overflow-y: auto;, the container's scrollbar is rendered behind the sticky elements.
In the following screenshot, the vertical scrollbar is behind elements 1, 2, 3, and 4.

enter image description here

But it works well when I remove the height: 100vh; overflow-y: auto; from the container and scroll inside the body element.

<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>
htmlcssioscss-positionsticky


Solution 1:[1]

Setting -webkit-transform: translateZ(0) solves the issue.

<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;

            /* fix */
            -webkit-transform: translateZ(0);
        }
        .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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 the Hutt

Related Questions