Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Replace vendored floating-ui in FloatingDOMController with CSS Anchor Positioning

オープン
#3,118 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
38/100
issue の種類
リファクタリング
明瞭さ
おおむね明確
活発さ
静か
技術スタック
css, html, typescript
領域
frontend, web-dev

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
394
フォーク
107
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

patternfly/patternfly-elements のほかの issue

patternfly/patternfly-elements の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。