"object-fit: cover;" on Chrome renders images jagged

I am using object-fit: cover; to display an image inside a square (or circle) while maintaining the original proportions of the image.

The only problem that I've noticed is that in Chrome if the image is taller than it is wide, it is shown as jagged. On Firefox, I don't notice this problem.

I have tried forcing the render using the GPU with translateZ or similar, sometimes it works, sometimes it doesn't.

Here are some screenshots showing the problem (notice the difference between the last squares):

Chrome (placeholder images)

Firefox (placeholder images)

Chrome (sample images)

Firefox (sample images)

Tested on:

Chrome v103.0.5060.114
Firefox v102.0
Fedora 35

Here's the example code:

.box {
  width: 10em;
  height: 10em;
}

.cover {
  object-fit: cover;
}

<div>
  <img class="box" src="https://dummyimage.com/640x640/000/fff" />
  <img class="box" src="https://dummyimage.com/640x320/000/fff" />
  <img class="box" src="https://dummyimage.com/800x1000/000/fff" />
</div>
<div>
  <img class="box cover" src="https://dummyimage.com/640x640/000/fff" />
  <img class="box cover" src="https://dummyimage.com/640x320/000/fff" />
  <img class="box cover" src="https://dummyimage.com/800x1000/000/fff" />
</div>

Why does this happen in Chrome?

"object-fit: cover;" on Chrome renders images jagged

0 Answers