The Safari Margin Collapse Hack

The Problem

On Safari (both desktop and iOS), when scrolling beyond the page content, a different background color appears below the content. The site's background (#1a1a24) stops abruptly, revealing a darker default background behind it.

Root Cause

Two CSS behaviors combine to create this issue:

• Margin collapse: Child elements' margins can "collapse through" their parent if the parent has no padding or border
• Background painting: Safari paints the background only as far as the actual content extends, not including collapsed margins

Our Container component has margin-bottom: 24rem to give breathing room at the bottom of pages. This margin was collapsing through the body element, so Safari's background stopped before that 24rem space.

Attempted Solutions

❌ Attempt 1: height: 100%

.css

html {
  height: 100%;
}
body {
  height: 100%;
}

Result: Fixed Safari background, but broke all bottom margins. Setting explicit height prevents margins from working properly.

❌ Attempt 2: minHeight: 100%

.css

body {
  minHeight: 100%;
}

Result: Same margin collapse issue persisted.

✅ Solution: 1px padding

.css

body {
  minHeight: 100vh;
  paddingBottom: 1px;
}

Result: Works perfectly. The 1px padding creates a "boundary" that prevents margin collapse, while being imperceptible to users.

Why This Works

According to CSS spec, margins don't collapse through a parent that has:

• Padding (even 1px)
• Border
• Inline content
• overflow other than visible

The 1px padding is enough to prevent collapse while being visually undetectable. Combined with minHeight: 100vh, the body extends to fill the viewport and its background color covers the full scrollable area.

The Code

Location: src/styles/GlobalStyles.tsx

.ts

body: {
  // ... other styles
  minHeight: '100vh',
  paddingBottom: '1px', // Safari margin collapse fix
}

When Can We Remove This?

This hack can be removed when one of the following happens:

• Safari changes how it paints backgrounds with collapsed margins
• We change the Container component to use padding instead of margin
• We stop caring about Safari (unlikely)

Related Issues

This is a known Safari quirk that many developers encounter. It's technically spec-compliant behavior, just inconvenient. The conservative fix (1px padding) is better than fighting browser behavior.