Safari ломает сайт элемент сайта

Question

Всем привет! Столкнулся я с такой проблемой. Сафари решил немного сломать мне сайт. А именно он зачем то увел картинку webp вправо. При том в других браузерах все ок. Вот скрин как сейчас выглядит сайт. На скрине хром в котором все ок, старый сафари где нету поддержки webp, но все равно картинка на месте, и новый сафари который поддерживает Webp но картинка пошла гулять. Хотел бы разобраться в чем причина, может кто то сталкивался с подобным? Вот SCSS:

.right {
      display: flex;
      align-items: center;
      justify-content: center;

      flex-direction: column;

      width: 100%;
      height: 100%;

      padding-top: 25px;
      box-sizing: border-box;

      .phone {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;
        max-height: 60vh; // old: calc(100vh - 350px)

        & > img {
          height: 100%;
        }

HTML:

<div class="right">
    <div class="phone">
       <img src="assets/img/phone.webp" alt="">
</div>

Или же вот ссылка на сайт: https://safety123.000webhostapp.com/

Answer 1

Сделайте изображению правильный размер (а не этот монстр 1796х1833). Добавьте атрибуты width height для тегов img (если есть необходимость в адаптивности используйте в связке с picture) уберите это неподобство в стилях

.section1 .content>.grid .right .phone>img {
    height: 100%;
}

и будет вам счастье. Тут не в webP проблема, а в том что вы слона запихиваете в нору. *Какой смысл использовать современный webp если элементарных моментов не понимаете. webP всё ещё новый формат у него нету 100% совместимости со всеми браузерами.

БЛОГ НА HUSL

Safari ломает сайт элемент сайта

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