The image loaded in an Avatar component is low res / pixelated

Anvil Q&A
1

Avatar components appear to display images in very low resolution / pixelated. This problem is not present with the standard Image component.

This can be reproduced by simply adding an Avatar component to a New M3 app and specifying a file for its image property.

Additional observation: If there is also an Image component on the form with the same image (as the Avatar’s) set as its src, then switching away from the app’s tab and going back to it makes the Avatar image display normally (high res).

2

It seems that the issue is present on Chrome but not on Firefox.

1 Like
3

So apparently this is caused by object-fit: cover and how interpolation works in chromium-based browsers. Here are more details for those curious:

An easy fix is adding the following to your css.

.anvil-m3-avatar img.anvil-m3-avatar-image {
  overflow-clip-margin: unset;
}
3 Likes
4

It would be very helpful if you could raise an issue on the M3 repo: GitHub - anvil-works/material-3-theme: Anvil's Material 3 Theme

We can get a fix added in the next release of the theme :slight_smile:

5

Hey @brooke, I made an issue and PR :slight_smile:

4 Likes