移动端iOS Safari使用position:sticky时内容溢出bug求解

在包含两个子块的section容器内，对首个块使用position: sticky定位：首个sticky块承载图片内容，第二个块为带白色背景的普通内容块。
核心实现代码如下：

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="示例图">
  </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;
}

异常表现 #

上述代码在多数环境下可正常运行，但在iOS端Safari浏览器中会出现sticky图片部分透出在白色内容块上方的异常，Safari移动端模拟器可稳定复现该问题。
给父级section添加overflow: hidden属性虽可解决图片透出问题，但会直接导致position: sticky定位完全失效，无法使用。

以下方案均不会影响sticky定位的正常生效，可根据实际场景选择：

• 方案1：触发硬件加速修正渲染bug
  给sticky元素.first添加3D变换属性，强制iOS Safari使用GPU渲染，修正层叠计算错误：

  .first {
    /* 原有sticky属性保留 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  

• 方案2：显式声明层叠顺序
  iOS Safari对sticky元素的默认z-index计算存在偏差，显式给sticky元素设置低于后续内容块的层级即可：

  .first {
    /* 原有属性保留 */
    z-index: 0;
  }
  

  注意需保证.second的白色背景为完全不透明的纯色，不要使用rgba(255,255,255,0.99)这类带透明度的色值，避免Safari识别为半透明层导致透出。
• 方案3：物理遮挡拼接缝隙
  如果前两种方案在部分低版本iOS系统仍有异常，可以给内容块设置1px的重叠区域，彻底覆盖拼接处的渲染缝隙：

  .second {
    /* 原有属性保留 */
    margin-top: 1px;
    margin-bottom: -1px;
  }
  

  该方案无兼容性副作用，适配所有iOS版本。

内容的提问来源于stack exchange，提问作者Danylo Zaviryukha