左侧粘性元素在footer进入视口、高度调整时闪烁的原因

先明确你的场景：左侧粘性容器高度设为calc(100vh - 头部高度)，右侧是正常滚动内容；粘性元素固定状态下正常，当footer进入视口时需缩小高度，此时出现瞬间上下偏移的闪烁。下面分浏览器拆解原因：

Chrome #

Chrome的粘性定位（position: sticky）基于元素初始布局框和滚动时的视口交集计算锚定位置。当你瞬间修改粘性元素高度时：

• 浏览器会立即触发重排，重新计算元素的sticky锚定约束（top/bottom的生效范围），但旧布局的渲染帧和新布局的计算结果之间存在短暂断层，导致元素位置瞬间跳变。
• 另外Chrome的 compositor线程（负责渲染）和主线程（负责布局计算）存在同步延迟：高度修改触发主线程重排，但compositor可能还在用旧布局数据渲染一帧，视觉上就会出现闪烁。

Firefox #

Firefox对粘性元素的布局稳定性要求更高，若未给粘性元素设置contain: layout，高度突变时会重新计算整个包含块的布局：

• 它会优先保留粘性元素的底部锚定逻辑，当高度突然缩小，元素底部位置先被更新，但顶部位置的调整滞后一帧，导致元素出现上下方向的瞬间偏移。
• 同时Firefox对动态计算高度（比如calc(100vh - 头部高度)）的实时更新逻辑偏保守，footer进入视口时视口有效高度的变化和元素高度修改的时机不同步，也会加剧闪烁。

Safari #

Safari的粘性定位实现有独特的布局逻辑，对元素尺寸变化的敏感度极高：

• 当修改粘性元素高度时，Safari会重新触发粘性状态的校验流程，从固定态重新计算元素在视口中的锚定位置，这个过程没有过渡缓冲，直接呈现新位置，视觉上就是瞬间偏移。
• 另外Safari对vh单位的实时计算存在延迟，calc(100vh - 头部高度)的更新速度跟不上footer进入视口的滚动速度，导致高度调整和位置锚定的计算不同步，触发闪烁。

共同底层逻辑 #

本质上是动态修改粘性元素高度时，浏览器布局重排（reflow）与渲染（paint）的帧同步问题：高度变化触发的布局计算和粘性定位的锚定计算不在同一帧完成，中间会出现一帧错误布局，表现为闪烁。仅设置top和bottom属性只是固定了锚定范围，无法解决帧同步层面的问题。

内容的提问来源于stack exchange，提问作者Akash Kushwaha