手机上正文滚到最后一屏,底部 fixed 的分享条高 96px,正好把「下一篇」按钮盖住,手指点上去弹出的是分享面板。乍看像缓存或者权限的锅,追下去往往不是。
.post { padding-bottom: calc(var(--share-h, 96px) + env(safe-area-inset-bottom)); }
.share-bar { height: var(--share-h, 96px); position: fixed; bottom: 0; }
追下去是这么回事:分享条用 position: fixed 贴在底部,正文容器只留了 24px 的 margin-bottom,没有按分享条真实高度补白。安全区变量也没算进去,iPhone 上实际占位比 96px 更高。
「分享条遮挡正文」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
偶发问题先统计频率,一小时几次和一天一次,查法完全不同。改完顺手把文档补一句,省得下次自己重新推一遍。
监控和日志的时间要对上,时区不一致会多绕很大一圈。
具体做法是,量出分享条实际高度 写进 CSS 变量;正文容器补 padding-bottom 等于该变量加安全区;用 IntersectionObserver 检查文末按钮有没有被压住。
验收就看一点,滚到文末,「下一篇」按钮完整露在分享条上方,点击跳转正常。
