Bug - Popper - flash of incorrectly positioned popper on open

Aperta
#12,264 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

  • #12177 di @fallmo — chiusa senza merge

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia dalla pagina del componente dropdown di PatternFly e dagli elementi Popper coinvolti nell’apertura dei dropdown, quindi riproduci il flash aprendo e chiudendo ripetutamente i dropdown in Safari. Segui la sequenza di apertura in relazione al rendering, al posizionamento di Popper.js e all’opacità; il problema è risolto quando il popper non appare mai nell’angolo in alto a sinistra prima di raggiungere la posizione corretta.

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

Descrizione

Breaking change :boom:

Describe the problem
Popper elements (dropdowns, select, etc.) occasionally flash at the top-left of the screen before appearing in their correct position.

Explanation
When a popper opens, there's a race condition between:

  1. The popper element being rendered (initially with opacity: 0)
  2. Popper.js calculating and applying the correct position
  3. The opacity transitioning to 1

The opacity transitions to 1 before Popper.js finished calculating and applying the position transform.

How do you reproduce the problem?

  1. Go to the PatternFly dropdown component page.
  2. Open and close the dropdowns back to back.

Screenshots

  • PF website

https://github.com/user-attachments/assets/0a076fc4-ead1-4d6a-a497-1f72ee3e28f5

  • RH website

https://github.com/user-attachments/assets/4ea2b102-d9c9-4c76-8000-ef3631c6e3ab

What is your environment?

  • OS: macOS Tahoe 26.3

  • Browser: Safari 26.3

  • CPU: M3

  • Memory: 24 GB

Jira Issue: PF-3668

Lingua principale
TypeScript
Stelle
862
Fork
392
Merge medio
4g 8h
PR unite (30g)
9

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-react

Tutte le issue di patternfly/patternfly-react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.