patternfly / patternfly/patternfly-react
Bug - Popper - flash of incorrectly positioned popper on open
Nessuno ha ancora preso questa issue.
- #12177 di @fallmo — chiusa senza merge
- Lingua principale
- TypeScript
- Stelle
- 862
- Fork
- 392
- Merge medio
- 4g 8h
- PR unite (30g)
- 9
Descrizione
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:
- The popper element being rendered (initially with
opacity: 0) - Popper.js calculating and applying the correct position
- 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?
- Go to the PatternFly dropdown component page.
- 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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
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.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 35/100