search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
443 stars 99 forks source link

DynamicPageHeader: When the header is scrolled to be hidden the page content skips #5269

Closed acbwro closed 11 months ago

acbwro commented 11 months ago

Describe the bug

When the header content is not pinned and I scroll the content then at the moment when the header becomes hidden the content does not scroll smoothly but skips/jumps visibly.

Isolated Example

No response

Reproduction steps

  1. Go to the storybook: https://sap.github.io/ui5-webcomponents-react/?path=/docs/layouts-floorplans-dynamicpage--docs
  2. In the first example of Dynamic Page make sure the header is NOT pinned
  3. Scroll the content of the dynamic page in the example
  4. Notice that at the moment when the header becomes totally out of view the content inside is not scrolling smoothly but is rapidly shifted

Expected Behaviour

Content of the dynamic page scrolls smoothly

Screenshots or Videos

No response

UI5 Web Components for React Version

latest version

UI5 Web Components Version

latest version

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

It seems to be caused by setting position: absolute when the header is being hidden. It is causing the header to be taken out of the DOM tree and the content div changes its position. If the position is set to relative then the scrolling is smooth - most likely it's in this line: https://github.com/SAP/ui5-webcomponents-react/blob/main/packages/main/src/components/DynamicPage/index.tsx#L293

Relevant log output

No response

Declaration

github-actions[bot] commented 11 months ago

:tada: This issue has been resolved in version v1.23.0 :tada:

The release is available on v1.23.0

Your semantic-release bot :package::rocket: