Firefox浏览器中position: sticky元素滚动时出现随机空白的技术咨询

Hey there, let's dig into this frustrating sticky element issue you're seeing in Firefox. I've reviewed your problem description and the reproduction code, and I can see exactly what's causing those random blank spaces—and how to fix it.

What's Causing the Problem? #

The core issue lies in how Firefox handles position: sticky elements nested inside containers with display: contents, combined with the float property on your .sticky-row element:

• display: contents makes an element "disappear" from the box model—it doesn't generate a layout box, which confuses Firefox's sticky positioning logic when tracking scroll states.
• Using float: left on a sticky element further disrupts Firefox's layout calculations. When you scroll up, the browser fails to recalculate the sticky element's proper placeholder height, leading to that extra blank space.
• The reason triggering a redraw (like inspecting the element or accessing clientTop) fixes it is because it forces Firefox to re-run the layout calculation from scratch, correcting the height mismatch.

Your reproduction example needing a refresh to show the issue is just a variation of the same root cause—Firefox's layout cache gets stuck in an incorrect state, and the refresh + scroll sequence triggers that broken state earlier.

Step-by-Step Fixes #

1. Remove Unnecessary display: contents Rules #

Your filter-bar, sticky-wrapper, and sticky-layer elements are using display: contents but don't need to. Removing these will give the parent elements proper layout boxes, which Firefox needs to track sticky positioning correctly.

Update your CSS:

filter-bar { display: block; }
.sticky-wrapper { display: block; }
.sticky-layer { 
  display: flex; /* Use flex instead of contents to handle the left/right layout */
  align-items: flex-start;
}

2. Replace Float with Flex for Sticky Row Layout #

The float: left on .sticky-row is conflicting with its position: sticky property. Since we switched .sticky-layer to flex, we can remove the float entirely and let flex handle the width distribution.

Update .sticky-row CSS:

.sticky-row {
  z-index: 9;
  background: #fff;
  position: sticky;
  top: -1px;
  width: calc(100% - 100px);
  /* Remove float: left */
}

3. Fix the Sticky Border Positioning #

Your .sticky-border uses a CSS variable --row-height which isn't set anywhere in your code. To ensure it aligns correctly with the sticky row, either:

• Hardcode the top value based on your sticky row's actual height (e.g., if the row is ~102px tall, set top: 101px to match the top: -1px on .sticky-row), or
• Dynamically update the --row-height variable via JavaScript when the row's height changes.

Example hardcoded fix:

.sticky-border {
  top: 101px; /* Matches sticky-row's top offset + actual height */
  /* Keep other existing styles */
}

Optional: Fallback JavaScript Fix (If CSS Adjustments Aren't Enough) #

If you still see occasional issues after the CSS fixes, you can force a redraw on scroll to ensure Firefox recalculates the layout correctly. Add this script to your page:

window.addEventListener('scroll', () => {
  const stickyElements = document.querySelectorAll('.sticky-row, .sticky-info');
  stickyElements.forEach(el => {
    // Trigger a reflow/redraw to correct layout
    void el.offsetHeight;
  });
}, { passive: true });

This is a lightweight workaround that won't impact performance significantly, but the CSS fixes are always the better long-term solution.

Testing the Fix #

After applying these changes:

• Scroll down the page until the sticky elements lock into place
• Scroll back up—you should no longer see the extra blank space
• No need to refresh the page to reproduce the issue anymore, since the layout context is now stable for Firefox to handle correctly

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