5

I'm using object-fit:cover on some IMG tags within a wrapper div to try to fill a div with the image. I've noticed that some files seem to have their aspect ratios stretched, while others are displayed correclty. This occurs specifically in Chrome (I'm observing it on version 83). Display issue on Chrome It works ok on Edge (and Firefox): Display ok on Edge

I suspect this is a rendering bug in Chrome, and it may be triggered by the images having EXIF rotation metadata.

Here is a demonstration - https://codepen.io/mark_keo/pen/MWKXggz

<div>
  Image which breaks:<br/>
<div style="width:400px; height:300px; display:inline-block;">
  <img src="https://storage.googleapis.com/kms-au.appspot.com/sites/mc-spares/assets/e0b26d28-353a-4e8b-b23b-b89685fea303/5FE7A3BC-52C5-4157-9FA8-E48826E89352.jpeg" style="object-fit:cover;width:100%; height:100%;"/>
</div>
<img src="https://storage.googleapis.com/kms-au.appspot.com/sites/mc-spares/assets/e0b26d28-353a-4e8b-b23b-b89685fea303/5FE7A3BC-52C5-4157-9FA8-E48826E89352.jpeg" style="height:300px;"/>
</div>
<div>
  Image that works:<br/>
<div style="width:400px; height:300px; display:inline-block;">
  <img src="https://storage.googleapis.com/kmsstaging-au.appspot.com/sites/mc-spares/assets/a1169254-0bd1-46ed-89bf-6b4535006e49/x1d-xcd45-04.jpg" style="object-fit:cover;width:100%; height:100%;"/>
</div>
<img src="https://storage.googleapis.com/kmsstaging-au.appspot.com/sites/mc-spares/assets/a1169254-0bd1-46ed-89bf-6b4535006e49/x1d-xcd45-04.jpg" style="height:300px;"/>
</div>

So is there a mistake in the CSS/HTML or is this a browser bug?

Mark
  • 3,459
  • 1
  • 18
  • 23
  • We are also seeing this same issue in Chrome but not in Safari or Firefox. Our issue is also due to the EXIF data of the image specifying that it needs rotation and the image aspect ratio is not maintained after it is rotated. – Dan Jul 13 '20 at 16:03

1 Answers1

1

It looks like this is a browser bug. I've reported it to the chromium bug tracker, and it's been reproduced by another tester. It appears it was introduced after Chrome 65.

Mark
  • 3,459
  • 1
  • 18
  • 23