UI5 Integration Card flicker in footer area in wider grid layouts

[NehaCAgarwal]

What is the issue and how can we reproduce it?

When rendering a UI5 Integration Card in Joule fullscreen or standalone, the space above the footer action strip flickers. This flicker occurs at the bottom of the card if there are no footers. This flicker also sometimes occurs when opening a link from the actions footer. It happens on every render of the card.

1. Go to https://sdk.openui5.org/nightly/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/explore/adaptive
2. Copy the below json into the manifest.js panel

manifest

{
    "_version": "1.17.0",
    "sap.app": {
        "type": "card",
        "id": "card.object.groups"
    },
    "sap.card": {
        "type": "Object",
        "data": {
            "json": "<? http_response.body ?>"
        },
        "header": {
            "title": "Internal ID: {BusinessPartner}",
            "subTitle": "External ID: {BusinessPartnerUUID}",
            "icon": {
                "src": "sap-icon://customer-and-contacts"
            }
        },
        "content": {
            "groups": [
                {
                    "title": "Details",
                    "items": [
                        {
                            "label": "First Name",
                            "value": "{FirstName}"
                        },
                        {
                            "label": "Last Name",
                            "value": "{LastName}"
                        },
                        {
                            "label": "Created on",
                            "value": "{= format.dateTime(${CreationDate}, { \"style\": \"medium\" })}"
                        }
                    ]
                },
                {
                    "title": "Contact",
                    "items": [
                        {
                            "label": "Address",
                            "value": "<? business_partner_address ?>"
                        },
                        {
                            "label": "Email",
                            "value": "<? business_partner_email ?>",
                            "actions": [
                                {
                                    "type": "Navigation",
                                    "parameters": {
                                        "url": "mailto:<? business_partner_email ?>"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        "footer": {
            "actionsStrip": [
                {
                    "type": "Link",
                    "text": "View in CRM",
                    "icon": "sap-icon://action",
                    "actions": [
                        {
                            "type": "Navigation",
                            "parameters": {
                                "ibnTarget": {
                                    "semanticObject": "BusinessPartner",
                                    "action": "display"
                                },
                                "ibnParams": {
                                    "id": "<? business_partner_id ?>"
                                },
                                "url": "https://google.com"
                            }
                        }
                    ]
                },
                {
                    "type": "ToolbarSpacer"
                },
                {
                    "type": "Link",
                    "text": "Open SAC story",
                    "icon": "sap-icon://action",
                    "actions": [
                        {
                            "type": "Navigation",
                            "parameters": {
                                "url": "<? sac_url.value ?>"
                            }
                        }
                    ]
                }
            ]
        }
    }
}

3. Click "Run"
4. See that the integration cards fields are laid out vertically. The flicker only occurs when the card is in a wider layout that moves the fields into columns so we need to adjust the styles to see the issue

Vertical versus columns card

5. Inspect the card and find the div with id="container-cardExplorer---exploreSamples--cardContainer-item-cardSample"
6. Add style width: 600px to this div in order to use the wider layout (If there is a simpler way to make the card wider, this will also work. I do not know how to do so other than this)

Div to modify

7. Click "Run"
8. See flicker in the footer area of the card every time you hit "Run"

Flicker video

https://github.com/user-attachments/assets/d47dc6bf-b67e-484c-b15f-197ca0133f5b

https://github.com/user-attachments/assets/4fa0e476-f9f3-4612-9976-7ea2eb73ba78

Error:

On a UI5 integration card in a horizontal/columns layout, the space between card details and footer actions, or space at the bottom of the card if there are no footer actions, flickers on every render.

Expected behavior:

No flicker should occur on render of the card

Originally reported in ui5-webcomponents repository and referred to openui5, refer here: https://github.com/SAP/ui5-webcomponents/issues/11458

Which OpenUI5 version is your project targeting?

1.134.0

Is the issue device- or browser-specific?

No

Confirmation

• [x] I have searched the existing issues and reviewed the relevant documentation as well as the API reference.
• [x] I am not disclosing any internal or sensitive information.

[MapTo0]

Hello @NehaCAgarwal , Thank you for sharing this finding. I've created an internal incident DINC0500095. The status of the issue will be updated here in GitHub.

Regards, Martin