Use the Oddbird CSS Anchor Positioning Polyfill

What the Polyfill Does

Oddbird's CSS Anchor Positioning Polyfill parses your CSS, finds anchor positioning rules, and emulates them with JavaScript: it watches the anchor elements with ResizeObserver and MutationObserver, computes the target's position on every change, and applies the result with inline style attributes.

The result: anchor-name, position-anchor, anchor(), and position-area all work in Firefox and older browsers, with the same syntax as native code.

Installation

npm install @oddbird/css-anchor-positioning

import polyfill from '@oddbird/css-anchor-positioning';

// Conditionally apply only when native support is missing
if (!('anchorName' in document.documentElement.style)) {
  polyfill();
}

Performance characteristics

The polyfill is strictly slower than native anchor positioning. Where the browser does anchor work as part of layout (effectively free), the polyfill does it in JavaScript on every layout-affecting change. For simple cases (a few tooltips on a page), the difference is imperceptible. For 100+ anchored elements all updating during scroll, you'll see frame drops.

The trade-off is correctness: with the polyfill, your code works in 100% of browsers today. Without it, Firefox users get either a broken layout or your manual fallback positioning.

When to drop the polyfill

When Firefox ships native support (no concrete date as of April 2026), you can drop the polyfill in a release — your CSS doesn't change. Until then, ship the polyfill conditionally.

Caveats

The polyfill supports the most common syntax but not every feature:

• ✅ anchor-name, position-anchor
• ✅ anchor() function with named anchors
• ✅ position-area shorthand
• ✅ position-try-fallbacks with flip-block and flip-inline keywords
• ⚠️ Named @position-try rules — partial support
• ⚠️ anchor-scope — not supported
• ❌ Implicit anchor (anchor with no name, used inside the same stacking context) — not supported

Check the polyfill README for the latest feature matrix.

Bundle size

The polyfill is around 30KB minified+gzipped. Conditionally loading it (as in the snippet above) means modern browsers pay zero cost.