Overflow content bug when I use position sticky iOS Safari on mobile

I want to use position sticky block(first) inside the section with two blocks. First sticky block is image and second is any content with white background.

DEMO link

HTML:

<section>
  <div class="first">
    <img src="https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=654&q=80" alt="asd">
  </div>
  <div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex voluptatum sit tempore libero, temporibus ea maxime consequatur pariatur incidunt iste.</div>
</section>

CSS:

section {
    position: relative;
    display: flex;
    flex-direction: column;
}
.first {
    position: sticky;
    top: 0;
}
img {
    max-width: 100%;
    display: block;
}
.second {
    font-size: 62px;
    z-index: 1;
    background: white;
}

It works properly but for iOS devices in Safari we can see part of image. We also can detect it in a Safari mobile emulator. screenshot-bug

If I add property overflow: hidden for parent section it will solve issue but position: sticky will not work.

Can we have another solution for this issue? Thank you in advance! Regards