Почему элемент верстки не корректно отображается в safari?

Question

[chelnokov_a]

Здравствуйте. Столкнулся с такой проблемой. Верстаю макет. На разрешении экрана шириной 375px (в частности но не только), во всех браузерах кроме сафари отображается все супер.

Прикрепляю 2 картинки.
Как должно быть и как в сафари.



Префиксы расставлены. Да и кроме трансформации и флексов я ничего не использовал даже. Браузера сафари у меня нет (есть только мобильный). Из-за этого не могу понять в чем ошибка и как поправить.

Верстку сюда закинул https://pateder.ru/Development/sineo/

Буду благодарен любым советам. Спасибо.

Answer 1

[Corvuss]

Точно не подскажу, но попробуйте к img добавить object-fit: cover .

Comments

[chelnokov_a]

При помощи свойства object-fit решил проблему с растягиванием картинки. Однако transform который смещал ее вниз и отрицательный margin не применились.

Answer 2

[Steppp]

В сафари всегда такие проблемки))) ставь для всех фоток height: 100%

А еще вопрос, используете reset или normalize?

Comments

[chelnokov_a]

Баблиотеки не использую.
При помощи свойства object-fit решил проблему с растягиванием картинки. Однако transform который смещал ее вниз и отрицательный margin не применились.

[Steppp]

normalize советую пользоваться, он делает все стили во всех браузерах одинаковые, тем самым меньше таких косяков получается)

Ссылка на cdn, подключать в html выше всех css файлов, тоесть самым первым