Firefox中position: sticky元素出现随机空白问题求助

我之前也遇到过一模一样的Firefox粘性定位bug！这种情况本质上是Firefox对sticky元素的布局重绘时机处理有问题，尤其是当你把sticky元素和浮动元素（比如你代码里.sticky-row用了float: left）、display: contents这类特殊布局属性组合使用时，浏览器滚动时没有正确计算元素的位置和容器高度，导致出现额外空白——而触发重绘（比如检查元素、访问clientTop）会强制浏览器重新计算布局，空白自然就恢复正常了。

问题根源分析 #

你的复现代码里有几个关键的风险点：

• .sticky-row使用了float: left，和其他sticky元素（.sticky-info、.sticky-border）同层级，Firefox在处理浮动+多sticky元素的组合时，滚动布局更新逻辑容易出现偏差；
• 父级容器用了display: contents，这个属性会让元素不生成布局盒，Firefox对它和sticky元素的组合支持并不稳定。

解决方案 #

1. 用Flex布局替代浮动（优先推荐）

浮动和sticky元素的组合是Firefox的重灾区，改成flex布局能从根源上解决问题：

修改这几处CSS：

.sticky-layer {
  display: flex; /* 替换原来的display: contents */
  align-items: flex-start;
}
.sticky-row {
  z-index: 9;
  background: #fff;
  position: sticky;
  top: -1px;
  width: calc(100% - 100px);
  float: none; /* 移除浮动 */
}
.sticky-wrapper {
  display: block; /* 替换原来的display: contents */
}

这样调整后，布局结构保留的同时，Firefox能正确计算每个sticky元素的位置，滚动时不会再出现空白。

2. 强制触发重绘的临时hack（紧急场景用）

如果暂时没法修改布局，可以在滚动事件里强制触发元素重绘，不过这个方法可能有轻微性能损耗：

window.addEventListener('scroll', () => {
  const stickyElements = document.querySelectorAll('.sticky-row, .sticky-info, .sticky-border');
  stickyElements.forEach(el => {
    // 用translateZ触发GPU加速，强制重绘
    el.style.transform = 'translateZ(0)';
    // 或者用访问offsetHeight的方式触发重绘，二选一即可
    // void el.offsetHeight;
  });
});

验证效果 #

修改布局后，你再测试原来的复现步骤（向下滚动页面后刷新，再向上滚动），应该就不会出现空白问题了——flex布局的标准化处理能让Firefox正确同步sticky元素的位置和容器布局。

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