Контент вываливается из контейнера iframe в safari MacOS

Встретил интересную проблему в браузере safari (Version 13.0.5 (15608.5.11)) на десктопе (в других браузерах все работает без проблем)

Собрал пример проблемы на кодпене: https://codepen.io/kudg0/pen/dyXpLpx

<div class="container">
  <div class="container__item">
    <iframe src="https://player.vimeo.com/video/470109667?background=1&muted=1&autoplay=1"></iframe>
  </div>
</div>

Хост видео vimeo, и возможно проблема в инициализации видео контейнера на их стороне, но все равно это очень странно и забавно

P.s: Решил проблему костылем, в браузере сафари поднимаю картинку вверх через transform, но это максимально тупо, поэтому хотелось бы найти решение)

оранжевая граница, это тень у контейнера, по ней можно понять что контент вывалился


Ответы (1 шт):

Автор решения: Ilya Brusenko

Проблема была в object-fit, который был в css у iframe, если убрать его, то все становится в порядке.

iframe{
  object-fit: contain;
}

Обновил свой пример на кодпене, там теперь есть решение проблемы и наглядное отображение ошибки.

P.s: ошибка ток в сафари

→ Ссылка