position: sticky content disappear and element disappear when over scrolling on iOS safari

there is a position: sticky element on top, which content is overflowed. when over scrolling the page, something wired happend

In the beginning, content of sticky element disappeared.

and then, sticky element disappeared

can anybody explain this

screen record

or you can try this example by yourself

source:

<body>
  <div class="main">
    <div class="tabs">
      <div class="item">101vw sticky</div>
    </div>
  </div>
</body>

<style>
  .main {
    height: 100vh;
  }
  .tabs {
    position: sticky;
    top: 0;
    overflow-x: auto;
  }
  .item {
    width: 101vw;
  }
</style>