bouncing icons / layout shift in webkit when loading a page initially

[d-koppenhagen]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

We noticed that our playwright test are quite instable. Digging into it, it tourned out, that in the webkit browser, the Icons are "bouncing" from top to bottom (layout shift) when loading the page initially.

You can reproduce it using the core web demo page and open it in Safari:
https://design-system.deutschebahn.com/core-web/version/latest/

Expected Behaviour

No layout shift for the icons

Screenshots

You can see it in the recorded video between second 2 and second 3:
https://github.com/user-attachments/assets/8d7dbc2d-ee6d-4d61-8cc9-952908b4dbd1

Browser version

Safari

Add any other context about the problem here.

No response

Which DB business unit do you work for?

DB Systel GmbH (please name your customer below)

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

No response

What project are you working on?

No response