Replace vendored floating-ui in FloatingDOMController with CSS Anchor Positioning

Aperta
#3,118 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
38/100
Tipo di issue
Refactoring
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
css, html, typescript
Ambito
frontend, web-dev

Direzione di ricerca

Start with FloatingDOMController and its vendored floating-ui code, focusing on the affected uses of the global window and the iframe failure described in RedHat-UX/red-hat-design-system#2969. Review the proposed @supports-gated CSS anchor positioning and browser timeline, then verify the iframe fix and the native positioning path against the existing behavior before removing the JavaScript path after October 2026.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

CSS Anchor Positioning reached Baseline in January 2026 (Chrome 125+, Safari 26+, Firefox 147+). The ~1400 lines of vendored floating-ui code in FloatingDOMController can be replaced with native popover attribute + CSS anchor positioning.

Current problems with the vendored code

The vendored floating-ui has diverged from upstream. Several functions use the bare global window where upstream uses getWindow(node) (i.e. node.ownerDocument.defaultView). This causes infinite recursion and stack overflow when components using FloatingDOMController are rendered inside same-origin iframes (see RedHat-UX/red-hat-design-system#2969).

What CSS Anchor Positioning replaces

Vendored floating-ui code CSS replacement
calculatePosition, computeCoordsFromPlacement, all rect/offset math (~600 lines) anchor-name, position-anchor, anchor() function
Flip middleware, fallback placements loop position-try-fallbacks, @position-try
Shift middleware, overflow detection position-area + viewport-aware clamping
autoUpdate with ResizeObserver/IntersectionObserver/scroll listeners Not needed -- browser recalculates natively
getOffsetParent, getContainingBlock, isContainingBlock Not needed -- popover promotes to top layer, escaping containing blocks
Arrow positioning anchor() function on the arrow pseudo-element
RTL handling CSS logical properties (already baseline)

Timeline

Milestone Date
Firefox 147 ships anchor positioning Jan 2026
Firefox ESR 153 (includes anchor positioning) launches Jul 2026
Firefox ESR 140 (no anchor positioning) EOL Oct 2026

October 2026 is the earliest clean cutover for projects supporting Firefox ESR.

Polyfill considerations

The @oddbird/css-anchor-positioning polyfill (~8KB gzipped) exists but has limitations that make it unsuitable for component libraries:

  • Cannot work with constructed stylesheets (how Lit delivers CSS)
  • Only processes styles present at call time
  • Cross-shadow-root anchoring unsupported
  • Global side effects even in "ponyfill" mode

Migration approach

  1. Fix the iframe window bug now (one-line fix per affected function)
  2. Keep JS positioning as the engine through ESR 140's lifetime
  3. Write CSS anchor positioning alongside, gated by @supports (anchor-name: --a)
  4. Drop JS positioning path after Oct 2026

References

Lingua principale
TypeScript
Stelle
394
Fork
107
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di patternfly/patternfly-elements

Tutte le issue di patternfly/patternfly-elements

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.