Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-dynamic-page): improve scrolling smoothness #10093

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

kgogov
Copy link
Member

@kgogov kgogov commented Oct 28, 2024

Bug Description

When scrolling, the header content would snap into place, causing an unintended shift in the page content scroll position. This resulted in the main content scrolling further down than expected, disrupting the user’s view.

Root Cause

Snapping the header set the height of the headerArea content to 0, causing a layout shift. This shift created additional space, which moved the main content of the dynamic page upwards unexpectedly.

Fix Details

  • Modified snapTitleByScroll to handle snapping conditions more precisely, using requestAnimationFrame to wait for rendering to complete before adjusting scroll positions.
  • Adjusted logic to maintain a stable scroll position when the header snaps or unsnaps, preventing unnecessary layout shifts.

Outcome

The header now snaps smoothly, maintaining the main content’s scroll position and providing a seamless user experience.

Fixes: #10011

Bug Description
When scrolling, the header content would snap into
place, causing an unintended shift in the page content scroll position.
This resulted in the main content scrolling further down than expected,
disrupting the user’s view.

Root Cause
Snapping the header set the height of the headerArea content
to 0, causing a layout shift. This shift created additional space, which
moved the main content of the dynamic page upwards unexpectedly.

Fix Details
- Modified `snapTitleByScroll` to handle snapping conditions more
  precisely, using `requestAnimationFrame` to wait for rendering to
  complete before adjusting scroll positions.
- Adjusted logic to maintain a stable scroll position when the header
  snaps or unsnaps, preventing unnecessary layout shifts.

Outcome
The header now snaps smoothly, maintaining the main content’s
scroll position and providing a seamless user experience.

Fixes: #10011
Bug Description
When scrolling, the header content would snap into
place, causing an unintended shift in the page content scroll position.
This resulted in the main content scrolling further down than expected,
disrupting the user’s view.

Root Cause
Snapping the header set the height of the headerArea content
to 0, causing a layout shift. This shift created additional space, which
moved the main content of the dynamic page upwards unexpectedly.

Fix Details
- Modified `snapTitleByScroll` to handle snapping conditions more
  precisely, using `requestAnimationFrame` to wait for rendering to
  complete before adjusting scroll positions.
- Adjusted logic to maintain a stable scroll position when the header
  snaps or unsnaps, preventing unnecessary layout shifts.

Outcome
The header now snaps smoothly, maintaining the main content’s
scroll position and providing a seamless user experience.

Fixes: #10011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[dynamic-page]: Scrolling behavior isn't smooth when header snaps
1 participant