ui5-dialog: grey `box-shadow` artifact rendered on open (Windows only)

[Lukas742]

Bug Description

When a ui5-dialog is opened, a large grey square is painted around the dialog instead of the soft drop shadow. The grey box appears to originate from the dialog's box-shadow not being composited/blurred correctly on the initial paint. As soon as the user interacts with the page (e.g. focus change), the artifact disappears and the correct soft shadow is shown.

Only reproducible on Windows and outside of an iframe. Not reproducible on macOS.

Affected Component

ui5-dialog

Expected Behaviour

No response

Isolated Example

https://stackblitz.com/edit/github-shqo5zpt?file=index.html,main.js

Steps to Reproduce

1. Open the StackBlitz link on Windows.
2. Click on "Open the preview in new Tab" as it's not reproducible inside an iframe
3. Click "Open Dialog".
4. Observe the grey square around the dialog (instead of a soft shadow).
5. Select a list item -> the grey box disappears and the correct soft drop shadow is shown.

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

2.25.0

Browser

Chrome, Edge

Operating System

Windows

Additional Context

No response

Organization

SIX Technologies

Declaration

• I’m not disclosing any internal or sensitive information.

[Vonahz]

Hi @UI5/ui5-team-ctr-rod ,

The issue is reproducible in the given stackblitz outside the iframe in Windows with Chrome and as soon as I click inside the dialog or switch tabs the issue disappears.
Would you have a look?

Regards,
Milen K.

[LidiyaGeorgieva]

Hello @Lukas742

I'm not able to reproduce the issue (please refer to the attached recording https://github.com/user-attachments/assets/b00f6858-ea49-403e-8400-0e068d808120).
I'm testing on Chrome Version 151 (and 152) on Windows 11.

Regards,
Lidiya