georgimkv
commented
1 year ago Hi @SAP/ui5-webcomponents-topic-rd
This issue is about the Dialog component and its attribute media-range not always being available or up to date.
The media-range is set only during a resize in Popup.ts, which happens when the browser calls back our function inside ResizeHandler.ts. The timing sequence of when this callback will be called is not reliable by design. The browser might want to delay it in order to process other things in the page.
Since this timing is unreliable, we can't also guarantee that the callback will always be delayed. The linked codesandbox sample does show the case. This delayed callback call should happen more often when the browser is under more load - e.g. on a slower device or very busy pages.
As a result, this change from breakpoints could potentially show on the screen as the responsive paddings change based on the media-range property being updated too late (content may flicker).
For a first step in improving this, we could make the media-range attribute up-to-date for consumers of the after-open event.
Alternatively, we could try showing these responsive paddings using container queries without relying on the MediaRange module. #7666
Bug Description
In a scenario where a dialog is inserted & immediately shown, there is a possibility that the dialog attribute do not contain the "media-range" value, after show it is applied after a very short period of time.
In a large project this can lead to a visual issue where the change of style is noticeable, as most of the paddings changes from a state with no padding to a state where all the slots of the dialog are spaced correctly. This may be explained by a large amount of CSS which makes the issue more visible as it takes a longer time to compute the style.
Affected Component
Dialog
Expected Behaviour
The media range should be applied as soon as the dialog is inserted into the DOM.
Isolated Example
https://codesandbox.io/s/ui5-webcomponents-forked-27yqp9?file=/src/index.js
Steps to Reproduce
To reproduce, you only need to open the dialog. It is a bit random so sometimes closing/opening a new dialog may be necessary. Since the sandbox is light, we do not clearly see the style issue but by using the logs, we can see that the media-range can be missing.
Log Output, Stack Trace or Screenshots
See my screenshot where on the second opening the dialog has no media-range attribute:
Priority
Medium
UI5 Web Components Version
1.17.2
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration