合规要求加了 Cookie 同意横幅 上线后移动端用户说底部购买按钮点不动 横幅固定在下边还带一层半透明遮罩 z-index 比按钮高出一大截。乍看像缓存或者权限的锅,追下去往往不是。

.consent-mask{position:fixed;inset:0;z-index:900}
.bottom-bar{position:fixed;bottom:0;z-index:1000}

追下去是这么回事:横幅脚本把自己插到 body 末尾并给了很高的层级 遮罩覆盖整屏又没做点击穿透 用户点到的其实是遮罩 视觉上按钮还在那儿 排查时容易怀疑到按钮身上。

「Cookie 同意横幅」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。

具体做法是,遮罩只盖内容区 底部操作栏抬到遮罩之上 或者只给横幅自身加背景;body 加一个横幅展开的类 同步给底部栏留出高度差;同意之后直接移除遮罩节点 隐藏节点照样拦点击。

验收就看一点,横幅显示时底部按钮能点 同意后遮罩消失 页面滚动也跟着恢复。

作者 9823189