微信里打开页面往下拉,顶部露出一条灰色底,松手才回弹,安卓和 iOS 露出来的颜色还不一样,截图给设计看都解释不清。乍看像缓存或者权限的锅,追下去往往不是。
html, body { background: #f5f5f5; }
body { min-height: 100vh; }
追下去是这么回事:页面没占满一屏或者已经滚到底,微信沿用系统回弹效果,露出的那层其实是 webview 自己的背景色。把背景色对齐就能遮住大半。
碰到「微信下拉回弹」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。
具体做法是,把 body 背景设成和页面顶部一致的颜色,先遮住灰底;内容不满一屏时用 min-height: 100vh 撑满,减少回弹空间,高度够了就不容易露底;不需要回弹就监听 touchmove,到顶时把手势拦掉,别整页都禁止滚动。
验收就看一点,微信里下拉露出的底色和页面一致,看不到突兀的灰条,两端颜色都统一。
