patternfly / patternfly/patternfly-react
Bug - Popper - flash of incorrectly positioned popper on open
Dieses Issue hat noch niemand übernommen.
- #12177 von @fallmo — ohne Merge geschlossen
- Vorherrschende Sprache
- TypeScript
- Sterne
- 862
- Forks
- 392
- Ø Merge
- 4 T. 8 Std.
- Gemergte PRs (30 T.)
- 9
Beschreibung
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der Seite der PatternFly-Dropdown-Komponente und den am Öffnen von Dropdowns beteiligten Popper-Elementen und reproduziere dann den Flash, indem du Dropdowns in Safari wiederholt öffnest und schließt. Verfolge die Öffnungssequenz rund um das Rendering, die Positionierung durch Popper.js und die Opazität; das Problem ist behoben, wenn der Popper nie oben links erscheint, bevor er seine korrekte Position erreicht.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 35/100