ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard
verified publisher icon SAP

[Popover]: Unwanted animation when opening with large content

Open PlutaKatarzyna opened this issue 5 months ago • 6 comments

Bug Description

UDEx Modal extends UI5 Dialog directly. When there is a lot of content in the dialog content slot, there is unwanted animation while opening.

https://github.com/user-attachments/assets/d603f202-8bf3-473d-a1c3-45931e2e4692

Affected Component

ui5-dialog

Expected Behaviour

No visible animation when opening dialog

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbiAgICA8bGluayByZWw9XCJzdHlsZXNoZWV0XCIgaHJlZj1cIi4vbWFpbi5jc3NcIj5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpOyBoZWlnaHQ6IDQ1MHB4O1wiPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuICAgIDx1aTUtYnV0dG9uIGlkPVwiZGlhbG9nT3BlbmVyXCI-T3BlbiBEaWFsb2c8L3VpNS1idXR0b24-XG5cbiAgICA8dWk1LWRpYWxvZyBpZD1cImRpYWxvZ1wiIGhlYWRlci10ZXh0PVwiUmVnaXN0ZXIgRm9ybVwiPlxuICAgICAgICA8c2VjdGlvbiBjbGFzcz1cImxvZ2luLWZvcm1cIj5cbiAgICAgICAgICAgIDxkaXY-XG4gICAgICAgICAgICAgICAgPHVpNS1sYWJlbCBmb3I9XCJ1c2VybmFtZVwiIHJlcXVpcmVkIHNob3ctY29sb24-VXNlcm5hbWU8L3VpNS1sYWJlbD5cbiAgICAgICAgICAgICAgICA8dWk1LWlucHV0IGlkPVwidXNlcm5hbWVcIj48L3VpNS1pbnB1dD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgICA8dWk1LWxhYmVsIGZvcj1cInBhc3N3b3JkXCIgcmVxdWlyZWQgc2hvdy1jb2xvbj5QYXNzd29yZDwvdWk1LWxhYmVsPlxuICAgICAgICAgICAgICAgIDx1aTUtaW5wdXQgaWQ9XCJwYXNzd29yZFwiIHR5cGU9XCJQYXNzd29yZFwiIHZhbHVlLXN0YXRlPVwiTmVnYXRpdmVcIj48L3VpNS1pbnB1dD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgICA8dWk1LWxhYmVsIGZvcj1cImVtYWlsXCIgdHlwZT1cIkVtYWlsXCIgcmVxdWlyZWQgc2hvdy1jb2xvbj5FbWFpbDwvdWk1LWxhYmVsPlxuICAgICAgICAgICAgICAgIDx1aTUtaW5wdXQgaWQ9XCJlbWFpbFwiPjwvdWk1LWlucHV0PlxuICAgICAgICAgICAgPC9kaXY-XG4gICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICAgIDx1aTUtbGFiZWwgZm9yPVwiYWRkcmVzc1wiIHNob3ctY29sb24-QWRkcmVzczwvdWk1LWxhYmVsPlxuICAgICAgICAgICAgICAgIDx1aTUtaW5wdXQgaWQ9XCJhZGRyZXNzXCI-PC91aTUtaW5wdXQ-XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-PHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgICAgPHVpNS1pbnB1dD48L3VpNS1pbnB1dD5cbiAgICAgICAgICA8dWk1LWJ1dHRvbj5CdXR0b248L3VpNS1idXR0b24-XG4gICAgICAgIDwvc2VjdGlvbj5cbiAgICAgICAgPHVpNS10b29sYmFyIHNsb3Q9XCJmb290ZXJcIj5cbiAgICAgICAgICAgIDx1aTUtdG9vbGJhci1idXR0b25cbiAgICAgICAgICAgICAgICBjbGFzcz1cImRpYWxvZ0Nsb3NlclwiXG4gICAgICAgICAgICAgICAgZGVzaWduPVwiRW1waGFzaXplZFwiXG4gICAgICAgICAgICAgICAgdGV4dD1cIlN1Ym1pdFwiXG4gICAgICAgICAgICA-XG4gICAgICAgICAgICA8L3VpNS10b29sYmFyLWJ1dHRvbj5cbiAgICAgICAgICAgIDx1aTUtdG9vbGJhci1idXR0b25cbiAgICAgICAgICAgICAgICBjbGFzcz1cImRpYWxvZ0Nsb3NlclwiXG4gICAgICAgICAgICAgICAgZGVzaWduPVwiVHJhbnNwYXJlbnRcIlxuICAgICAgICAgICAgICAgIHRleHQ9XCJDYW5jZWxcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgPC91aTUtdG9vbGJhci1idXR0b24-XG4gICAgICAgIDwvdWk1LXRvb2xiYXI-XG4gICAgPC91aTUtZGlhbG9nPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvRGlhbG9nLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9CdXR0b24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0lucHV0LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9MaW5rLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9MYWJlbC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvVG9vbGJhci5qc1wiXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9Ub29sYmFyQnV0dG9uLmpzXCJcblxudmFyIGRpYWxvZ09wZW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiZGlhbG9nT3BlbmVyXCIpO1xudmFyIGRpYWxvZyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiZGlhbG9nXCIpO1xudmFyIGRpYWxvZ0Nsb3NlcnMgPSBbLi4uZGlhbG9nLnF1ZXJ5U2VsZWN0b3JBbGwoXCIuZGlhbG9nQ2xvc2VyXCIpXTtcblxuZGlhbG9nT3BlbmVyLmFjY2Vzc2liaWxpdHlBdHRyaWJ1dGVzID0ge1xuICAgIGhhc1BvcHVwOiBcImRpYWxvZ1wiLFxuICAgIGNvbnRyb2xzOiBkaWFsb2cuaWQsXG59O1xuZGlhbG9nT3BlbmVyLmFkZEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCAoKSA9PiB7XG4gICAgZGlhbG9nLm9wZW4gPSB0cnVlO1xufSk7XG5kaWFsb2dDbG9zZXJzLmZvckVhY2goYnRuID0-IHtcbiAgICBidG4uYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsICgpID0-IHtcbiAgICAgICAgZGlhbG9nLm9wZW4gPSBmYWxzZTtcbiAgICB9KTtcbn0pIn0sIm1haW4uY3NzIjp7Im5hbWUiOiJtYWluLmNzcyIsImNvbnRlbnQiOiIifX0

Steps to Reproduce

  1. Put large content in ui5-dialog
  2. Open dialog
  3. Observer animation

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.8

Browser

Chrome

Operating System

No response

Additional Context

UDEx source ticket https://github.tools.sap/sapudex/digital-design-system/issues/2329

Organization

SAP UDEx Components & Tokens

Declaration

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

PlutaKatarzyna avatar Jul 24 '25 12:07 PlutaKatarzyna

Hello @SAP/ui5-webcomponents-topic-rd ,

Please take a look on this issue.

Best Regards, Nikolay Hristov

NHristov-sap avatar Jul 24 '25 13:07 NHristov-sap

This issue has been closed. To reopen, just leave a comment!

github-actions[bot] avatar Aug 25 '25 08:08 github-actions[bot]

Hello @PlutaKatarzyna ,

The issue should be fixed with #12108. If you still experience issues, let us know.

Best regards, Petar

dimovpetar avatar Aug 25 '25 08:08 dimovpetar

Thank you @dimovpetar , we will check with next release.

PlutaKatarzyna avatar Aug 25 '25 09:08 PlutaKatarzyna

This issue has been closed. To reopen, just leave a comment!

github-actions[bot] avatar Aug 25 '25 09:08 github-actions[bot]

Hi @dimovpetar , issue got reported back in UDEx repo. It seems that animation runs before Popup position got calculated, which is causing popup unwanted flickering. Please see details on screenshoot below or reach reported issue description here https://github.tools.sap/sapudex/digital-design-system/issues/2329

Image

FYI @petyabegovska

PlutaKatarzyna avatar Nov 07 '25 12:11 PlutaKatarzyna