Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Replace vendored floating-ui in FloatingDOMController with CSS Anchor Positioning

Aberta
  • Algo errado?
#3,118 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
38/100
Tipo de issue
Refatoração
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
css, html, typescript
Domínio
frontend, web-dev

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
395
Forks
107
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de patternfly/patternfly-elements

Todas as issues de patternfly/patternfly-elements

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.