bug(chip): chip avatar images vertically stretched

[ajaygandecha]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

On Safari, the chips with an avatar image appear to be significantly vertically stretched. This issue is also apparent in the example tab on the chip component page, as shown below:

Safari (v26.0.1 on MacOS 26 (Tahoe)):

On other browsers including Chrome, the issue is less prominent but still exists:

Chrome:

This appears to be an issue with Angular Material v19 and v18 as well, and this problem did not occur before the latest MacOS 26 (Tahoe) update. This issue also exists when opening the page with Safari iOS 26 and iPadOS 26 as well. Edit: Turns out the timings here was a coincidence and seems to exist across other browsers, including Chrome, not just Safari.

Reproduction

1. View any implementation of the chip component with the avatar image on MacOS 26's Safari. The best example is on the docs here:
   https://material.angular.dev/components/chips/examples

Expected Behavior

The expected behavior is for the correct aspect ratio / sizing of the avatar image, like so:

Actual Behavior

The actual behavior is an image significantly vertically stretched, like so:

Environment

• Angular: v20
• CDK/Material: v20.2.11
• Browser(s): Safari
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 26

[MeAkib]

Something related to min-height: fit-content;

[ajaygandecha]

@MeAkib thank you for pointing this out! Led me to play around with it a bit more, turns out this issue also appears on Chrome (though harder to notice) - disabling this style fixes the issue across all browsers. Opened a PR.