[Dynamic Page]: [Dynamic Page Footer] It's twinkling in certain width and screen resolution
Closed this issue · 3 comments
Describe the bug
Dynamic Page Footer will twinkling in certain width and screen resolution.
The root cause looks like caused by code in r@ui5/webcomponents-react/dist/components/DynamicPage/index.js, line 90 - 106, in the useEffect, we use IntersectionObserver, while it repeatly call the debouncedObserverFn
Isolated Example
https://stackblitz.com/edit/github-nfl6n7?file=src%2FApp.tsx
Reproduction steps
- Use the isolated example
2.Scroll the example width
3.In certain width, the Dynamic Page Footer, It's twinkling, and the scroll bar twinkling
...
Expected Behaviour
No repeatly switch Dynamic Page Footer position from sticky to absolute
20240711155850851.mp4
Screenshots or Videos
No response
UI5 Web Components for React Version
1.28.1
UI5 Web Components Version
1.24.0
Browser
Chrome
Operating System
Mac
Additional Context
No response
Relevant log output
No response
Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.
Hi @JackieWei
you didn't set a fixed height to the DynamicPage, that's why the footer is jumping:
Note: To preserve the intended design, please use only non-content based height values (px, rem, vh, etc.) as height of the DynamicPage.
Here you can find an example using a non content-based height: https://stackblitz.com/edit/github-nfl6n7-uoxcje?file=src%2FApp.tsx
Also I noticed a few more things that aren't recommended:
- The
DynamicPageTitle
component isn't meant to be used as standalone - The
DynamicPage
is not meant to be used without header area.
Hi @JackieWei
you didn't set a fixed height to the DynamicPage, that's why the footer is jumping:
Note: To preserve the intended design, please use only non-content based height values (px, rem, vh, etc.) as height of the DynamicPage.
Here you can find an example using a non content-based height: https://stackblitz.com/edit/github-nfl6n7-uoxcje?file=src%2FApp.tsx
Also I noticed a few more things that aren't recommended:
* The `DynamicPageTitle` component isn't meant to be used as standalone * The `DynamicPage` is not meant to be used without header area.
Hi @Lukas742 I have set a height = 100% actually. So it must be a numberic hight like 80vh, or 800px, but can't be percentage, like 100%?
Hi @JackieWei
the DynamicPageSideContent
sets some CSS properties to the content area which is affecting the children
. Two of these are display: inline
and height: auto;
both of these properties/values have an effect on percentile height values. In this case the height value basically does nothing, as the display type of the parent is set to inline
.
![image](https://private-user-images.githubusercontent.com/9749730/347761514-e30f2b45-79af-49c3-aaea-aca12b49b913.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMDY5NjYsIm5iZiI6MTcyNTEwNjY2NiwicGF0aCI6Ii85NzQ5NzMwLzM0Nzc2MTUxNC1lMzBmMmI0NS03OWFmLTQ5YzMtYWFlYS1hY2ExMmI0OWI5MTMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTIxNzQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2FkYTNjOTAwMWQ0ODkwY2Q3NDZmYjU2MTZiYjM5ZmNlNjU0NWI3M2IxNDliOGQ2NTBiNGJhMjgxMGUwOWEzYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.lFvJANt7ytF_q1TxY08DXBM-jnkB3Ta4KfRfZsQTIHU)