Browser Fallback Strategy for Firefox and Older Browsers

The Reality

As of April 2026:

Feature	Chrome	Edge	Safari	Firefox
anchor-name	125+	125+	26+	❌
position-anchor	125+	125+	26+	❌
anchor() function	125+	125+	26+	❌
position-area	125+	125+	26.1+	❌
position-try-fallbacks	125+	125+	26+	❌
@position-try named	128+	128+	❌	❌

Firefox accounts for ~3% of global traffic but is overrepresented in technical, accessibility-conscious, and developer audiences — don't ignore it.

Strategy 1: Progressive enhancement with @supports

Wrap anchor styles in @supports and provide a sensible default:

.tooltip {
  /* Default: position: absolute relative to a wrapper */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

@supports (anchor-name: --x) {
  .tooltip-trigger {
    anchor-name: --tt;
  }
  .tooltip {
    /* Override with anchor positioning */
    position-anchor: --tt;
    position-area: top;
    margin-bottom: 8px;
    /* Reset wrapper-based defaults */
    bottom: auto;
    left: auto;
    transform: none;
  }
}

Browsers without anchor support get the wrapper-based positioning (which has its own limitations — overflow clipping, no auto-flip — but is functional). Browsers with anchor support get the better experience.

Strategy 2: JS-driven detection

For runtime decisions (e.g. choosing whether to load the polyfill):

const supportsAnchor = CSS.supports('anchor-name', '--x');
const supportsPositionArea = CSS.supports('position-area', 'top');

if (!supportsAnchor) {
  // Load Oddbird polyfill, or skip the feature
  import('@oddbird/css-anchor-positioning').then(({ default: polyfill }) => polyfill());
}

Strategy 3: Floating UI as a fallback layer

If you already use Floating UI for tooltips, keep using it everywhere — anchor positioning is faster but Floating UI is universal. Migrate component-by-component as you touch each one.

What about no fallback?

For internal tools and admin dashboards where you control the browser ("Chrome only, latest"), skip the fallback entirely. Just write anchor-positioning CSS and assume support. Most internal tools fit this profile.

Don't conflate "no support" with "broken"

When anchor positioning is unsupported, the target element still renders — it just sits at its default position (usually top: 0; left: 0 for position: absolute without other offsets). It doesn't disappear. The user gets a visible-but-misplaced UI element, not a missing one. For non-critical anchored UI (decorative badges, hover hints), this is sometimes acceptable.