List: Images rendered differently in Chrome/Safari

[goodefroi]

Bug Description

Images within list items are rendered as a circle on Safari whilst rendered as a square with round corners on Chrome.

Expected Behavior

Both browsers render images in the same shape by default.

Steps to Reproduce

Open the documentation of the List component with both Chrome and Safari.

Context

• UI5 Web Components version: 1.2.1
• OS/Platform: macOS 12.2.1
• Browser: Chrome 99/Safari 15.3
• Affected component: ui5-list

Screenshots

Chrome 99:

Safari 15.3:

Priority

• Low
• Medium
• High
• Very High

[PetyaMarkovaBogdanova]

Hi colleagues,
ui5-avatar with shape "Square" is showed in circular shape in Safari.
Can you, please, check?

Kind regards,
Petya Markova.
(UI5 Dispatcher)

[ilhan007]

The second selector takes precedence on Safari

/*  Avatar.css */
:host([shape=Square]),
:host([shape=Square]) ::slotted(*) {
  border-radius: .25rem;
}

::slotted(*) {
  border-radius: 50%;
}

[wulinjie122]

Hi @ilhan007,
Is there a property to set the shape of avatar within ui5 list item?
I want render a Circle avatar, but the image by default is Square .