Zaro
May 3, 2025, 1:18pm
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).
Zaro
May 3, 2025, 1:21pm
2
It seems that the issue is present on Chrome but not on Firefox.
1 Like
Zaro
May 3, 2025, 3:34pm
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
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
Zaro
May 7, 2025, 1:18pm
5
Hey @brooke , I made an issue and PR
opened 01:07PM - 07 May 25 UTC
**Describe the bug**
Certain images become pixelated when resized to fit inside … the Avatar component on chromium-based browsers. This is caused by the `object-fit: cover;` property of `.anvil-m3-avatar img.anvil-m3-avatar-image`. For more details on `object-fit: cover;` causing pixelation please see:
- https://stackoverflow.com/questions/74502978/object-fit-cover-gives-pixelated-images-on-chrome
- https://www.reddit.com/r/webdev/comments/wxh6ld/objectfitcover_makes_image_look_distorted_aspect/
**To Reproduce**
Steps to reproduce the behaviour:
1. Create a New M3 app
2. Add an Avatar component
3. Select an image with an aspect ratio different than 1:1 as the image for the Avatar component
4. See the pixelation
**Expected behaviour**
The image shouldn't get pixelated
**Screenshots**

**Additional context**
N/a
4 Likes