patternfly / patternfly/patternfly-react

Bug - Popper - flash of incorrectly positioned popper on open

Offen
#12,264 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

  • #12177 von @fallmo — ohne Merge geschlossen
Breaking change :boom:
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:

  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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.