Bug - Popper - flash of incorrectly positioned popper on open
まだ誰も着手していません。
- #12177 @fallmo による — マージされずにクローズ
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
PatternFly の dropdown コンポーネントのページと、dropdown の開閉に関係する Popper 要素から始め、Safari で dropdown を繰り返し開閉してフラッシュを再現します。レンダリング、Popper.js による位置決め、opacity 周辺の開くシーケンスを追跡します。popper が正しい位置に到達する前に左上に表示されることがなくなれば、問題は完了です。
索引モデルが issue の本文から書いたものです。
説明
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
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR（30日）
- 9
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
patternfly/patternfly-react のほかの issue
-
PF Team
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
patternfly/patternfly-react#12651 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
patternfly/patternfly-react#12637 ·
-
PF Team
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
patternfly/patternfly-react#12617 · コメント 1 件 ·
-
PF Team
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
patternfly/patternfly-react#12610 · コメント 1 件 · リアクション 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
patternfly/patternfly-react#12600 ·
patternfly/patternfly-react の issue をすべて見る
似ている issue
-
blocklist removal
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
MetaMask/eth-phishing-detect#296544 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
pastelsky/bundlephobia#1122 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100