[ObjectPage]: page will twitch when the header height reaching the threshold of expansion and collapse

Offen
#9,128 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
Ein halber Tag
Anfängerfreundlichkeit
55/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Start from the ObjectPage implementation and reproduce with the layouts-floorplans-objectpage--full-screen-single-section story: make the collapsed content just require a scrollbar, then scroll to the bottom. Trace the header collapse/expand threshold logic and the scroll container sizing that feeds it. Done when the header state no longer oscillates at the bottom and the content remains scrollable.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

author action
Describe the bug

When scroll down to the bottom of the Dynamic page, the header height reaches a threashold of expansion and collapse which makes the page looks like twitching. This looks quite wired and breaks the ACC.

Isolated Example

No response

Reproduction steps

1.Go to https://ui5.github.io/webcomponents-react/v2/?path=/story/layouts-floorplans-objectpage--full-screen-single-section
2.Make sure if the header is collapsed, the content height on the page will just about to need a scollbar.
3.Try to use the mouse to scoll directly to the page bottom
4.You will see that due to header height reaches a threashold of expansion and collapse, it keeps rotate from the expansion view and collapse view, which makes the page looks like twitching.

Expected Behaviour

The page should not twitch in any time.

Screenshots or Videos

https://github.com/user-attachments/assets/d234b567-e183-404b-b062-063a2b64b5af

UI5 Web Components for React Version

2.27.2

UI5 Web Components Version

2.27.2

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration
  • I’m not disclosing any internal or sensitive information.
Vorherrschende Sprache
TypeScript
Sterne
543
Forks
114
Ø Merge
18 Std. 30 Min.
Gemergte PRs (30 T.)
76

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus UI5/webcomponents-react

Alle Issues in UI5/webcomponents-react

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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