object-fit : cover gives pixelated images on chrome

Question

I have a simple card element that has an <img> tag inside. The image has an object-fit: cover; property on it. When I'm in chrome it has a very strange pixelated effect on it. FireFox on the other hand draws the picture with no issue. Is this a chrome bug or it is just their rendering algorithm not being very good?

on the left the firefox's image, on the right the chrome's one, check the arms and the body.

chrome Version 107.0.5304.107 firefox version 107.0

A workaround would not work, since that would be a fix only on my end. Here is the same problem on another pc. (Different brand, diferent specs) The problem still persists. (Chrome on the right, still check the arms)

Answer 1

You should try :

overflow-clip-margin: unset;
overflow: visible;

It works for me.