Использую разметку с picture-тэгом для главного слайда:
<picture>
<source srcset="media/img/slide-1--mobile.jpg" media="(max-width: 767px)">
<img src="media/img/slide-1.jpg" alt="">
</picture>
И такие стили:
.header__slider .inner-slide img {
position: relative;
z-index: 1;
transform: translateX(0px);
transition: transform 1s;
vertical-align: middle;
width: 100%;
height: 100%;
object-fit: fill;
}
Везде всё работает хорошо, кроме safari(IOS 12) на планшетах. Даже в старых IOS(9+) рендеринг происходит корректно. Но в 12-й версии часть изображения просто "обрезается". Выглядит это так:
Теперь о забавном: происходит это только в портретном режиме(в пейзажном стили изображения не меняются). Рамка у img-тэга решает проблему. Рамка с цветом 'transparent' – нет. Рамку я себе позволить не могу. Во всех других браузерах отрисовывается корректно(даже в edge). Префиксы ставить пробовал – не помогло. Игнорировать этот баг не могу. Может кто сталкивался. Уже всё перепробовал.
upd: насчёт 11 IOS погорячился, там через раз отрисовывается. Так же только в портретной ориентации проблема. А вот скриншот с IOS 10