Подгонка объекта нарушает некоторые пропорции изображения ios в Chrome?

Question

Я использую object-fit: cover для некоторых тегов IMG внутри div-оболочки, чтобы попытаться заполнить div изображением. Я заметил, что некоторые файлы имеют растянутый вид ios, в то время как другие отображаются корректно. Это происходит конкретно в Chrome (наблюдаю на версии 83). It works ok on Edge (and Firefox):

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>

Так есть ли ошибка в CSS / HTML или это ошибка браузера?

Answer 1

Похоже, это ошибка браузера. Я сообщил об этом в систему отслеживания ошибок хрома , и это было воспроизведено другим тестером. Похоже, он был введен после Chrome 65.