Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Replace vendored floating-ui in FloatingDOMController with CSS Anchor Positioning

Offen
  • Stimmt etwas nicht?
#3,118 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
38/100
Issue-Typ
Refactoring
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
css, html, typescript
Bereich
frontend, web-dev

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Vorherrschende Sprache
TypeScript
Sterne
394
Forks
107
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus patternfly/patternfly-elements

Alle Issues in patternfly/patternfly-elements

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.