移动端 sticky 吸顶圆角被内容盖成直角的踩坑

现象

移动端 sticky 吸顶头部带圆角, 向上滚动列表时, 圆角变直角.

原因

border-radius 圆角弧外是透明的. 下方列表行(白色矩形)向上滚到吸顶头位置时, 会从这两个透明角 "钻" 出来, 把本该显示 body 灰的位置填成白色, 圆角看上去就没了.

改前

<!-- 吸顶头 -->
<div class="sticky top-0 rd-t-20 bg-white">
  吸顶头
</div>

<!-- 列表 -->
<div class="rd-b-20 bg-white">
  <div v-for="row in list" class="h-100 bg-white">{{ row }}</div>
</div>

吸顶头单层结构, 圆角弧外透明. 列表行向上滚时直接从透明洞钻进来, 圆角被白色填没.

改后

<!-- 吸顶头: 外层灰壳 + 内层白圆角 -->
<div class="sticky top-0 bg-body">
  <div class="rd-t-20 bg-white">
    吸顶头
  </div>
</div>

<!-- 列表 -->
<div class="rd-b-20 bg-white">
  <div v-for="row in list" class="h-100 bg-white">{{ row }}</div>
</div>

外层 bg-body 灰壳颜色 = 页面背景, 把内层白卡片的透明洞从背后堵上. 列表行先撞到灰壳就停住, 进不到洞里, 圆角永远在.

一句话

圆角弧外是透明的, 会漏. 在外面套一层和背景同色的壳把洞堵上就行.