Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Bug - Popper - flash of incorrectly positioned popper on open

Abierto
#12,264 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

  • #12177 de @fallmo — cerrado sin fusionar

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Comienza con la página del componente dropdown de PatternFly y los elementos de Popper implicados en la apertura de los dropdowns; después reproduce el flash abriendo y cerrando dropdowns repetidamente en Safari. Traza la secuencia de apertura en torno al renderizado, el posicionamiento de Popper.js y la opacidad; el problema estará resuelto cuando el popper nunca aparezca en la esquina superior izquierda antes de alcanzar su posición correcta.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
862
Forks
392
Merge medio
4 d 8 h
PR fusionados (30 d)
9

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de patternfly/patternfly-react

Todos los issues de patternfly/patternfly-react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.