移动站用 Safari 26 打开文章页,点一下顶部搜索框,整个页面向上跳了约 160 像素,正文第一段被顶出视口,CLS 记到 0.21。Chrome 和安卓真机都正常,桌面端也是 0.02。试过把顶部栏改成 absolute,跳得更厉害。

原因不止一个,得分开看。输入框聚焦时脚本调了 scrollIntoView,滚动落点按输入框算,没算固定头部的高度;body 在聚焦时被设成 overflow:hidden,滚动位置被重置;首屏用了 100vh,Safari 的地址栏收起后可视高度变化触发重排;字体后加载导致首屏行高变化,位移被算到同一段时间里。

先在真机上录一次 Performance,看位移发生的那一帧是谁在动

全局搜一遍滚动跳转的调用点

grep -rn 'scrollIntoView\|scrollTo' static/js/ | head

给固定头部留出滚动余量,避免锚点藏在栏下

html{scroll-padding-top:64px}

剩下的就是把整屏高度换成动态视口单位,减少地址栏收起的重排

min-height:100dvh;

别只看报错消失,验证要多做一步。真机上再点搜索框,页面不再整体上移,CLS 降到 0.03,输出框也稳定停在视口下半部分。

iOS 的键盘弹出会改变可视高度,用 100vh 的布局在这种时刻一定会动,换成 dvh 只是减小幅度,关键还是别在聚焦时改滚动位置。如果同一现象隔几天又出现,说明根因没找到,别当偶发处理。

作者 9823189