Why scrollbar is behind sticky elements in iOS Safari?

user_1196637 0
Viewed 308

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>

css-position sticky css html ios
1 Answers

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>

user_152739680
Related