Skip to content

bug(chip): chip avatar images vertically stretched #32251

@ajaygandecha

Description

@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)):
Image

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

Chrome:
Image

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:
Image

Actual Behavior

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

Environment

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

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/chips

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions