Safari: problem with object-contain while trying to keep aspect ratio - html

Question

I'm trying to make an image inside a slider to keep its aspect ratio. With Chrome, it works like a charm. But unfortunately Safari is driving me crazy and I can't figure out why this is happening.
Screenshot from Chrome:
and here the screenshot from Safari:
I have no idea why, but Safari keeps "inserting" these gray spacings around the image.
Here is the HTML:
<div class="slideshow-wrapper">
<button
type="button"
class="visually-hidden slideshow__pause"
data-id="ee8tnv"
aria-live="polite"
>
<span class="slideshow__pause-stop">
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="m-icon m-icon--pause"
viewBox="0 0 24 24"
>
<path d="M14,19H18V5H14M6,19H10V5H6V19Z"></path>
</svg>
<span class="m-icon__fallback-text">Diashow pausieren</span>
</span>
<span class="slideshow__pause-play">
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="m-icon m-icon--play"
viewBox="0 0 24 24"
>
<path d="M8,5.14V19.14L19,12.14L8,5.14Z"></path>
</svg>
<span class="m-icon__fallback-text">Diashow abspielen</span>
</span>
</button>
<div
class="
keep-ar
slideshow slideshow--small
box
slick-initialized slick-slider slick-dotted
"
id="Slideshow-ee8tnv"
data-autoplay="false"
data-speed="5000"
>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 750px">
<div
class="
slideshow__slide slideshow__slide--image-mgx38u
slick-slide slick-current slick-active
"
data-slick-index="0"
aria-hidden="false"
role="tabpanel"
id="slickSlide00"
aria-labelledby="slickDot00"
tabindex="-1"
style="
width: 375px;
position: relative;
left: 0px;
top: 0px;
z-index: 999;
opacity: 1;
"
>
<div class="keep-ar slideshow__image">
<picture>
<source
srcset="
//img-2.versacommerce.de/resize=master/gravity=center/++/vc-unsplash-proxy.s3.eu-central-1.amazonaws.com/UWkCguB75-E.jpg
"
/>
<img
data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt=""
/>
</picture>
</div>
<div class="slideshow__text-wrap slideshow__overlay">
<div class="keep-ar slideshow__text-content">
<div class="page-width">
<h2 class="h1 mega-title slideshow__title">Foto-Slide</h2>
<span class="mega-subtitle slideshow__subtitle">
Erzähle deine Geschichte mit Videos und Fotos
</span>
</div>
</div>
</div>
</div>
<div
class="slideshow__slide slideshow__slide--image-gy5hav slick-slide"
data-slick-index="1"
aria-hidden="true"
role="tabpanel"
id="slickSlide01"
aria-labelledby="slickDot01"
tabindex="-1"
style="
width: 375px;
position: relative;
left: -375px;
top: 0px;
z-index: 998;
opacity: 0;
"
>
<div class="keep-ar slideshow__image">
<picture>
<source
srcset="
//img-3.versacommerce.de/resize=master/gravity=center/++/vc-unsplash-proxy.s3.eu-central-1.amazonaws.com/c9FQyqIECds.jpg
"
/>
<img
data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt=""
/>
</picture>
</div>
<div class="slideshow__text-wrap slideshow__overlay">
<div class="keep-ar slideshow__text-content">
<div class="page-width">
<h2 class="h1 mega-title slideshow__title">Foto-Slide</h2>
<span class="mega-subtitle slideshow__subtitle">
Erzähle deine Geschichte mit Videos und Fotos
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block" role="tablist">
<li
class="slick-active"
aria-hidden="false"
role="tab"
aria-selected="true"
aria-controls="slickSlide00"
id="slickDot00"
>
<button type="button" data-role="none" role="button" tabindex="0">
Slide 1
</button>
</li>
<li
role="tab"
aria-selected="false"
aria-controls="slickSlide01"
id="slickDot01"
>
<button type="button" data-role="none" role="button" tabindex="0">
Slide 2
</button>
</li>
</ul>
</div>
</div>
and the SCSS:
slideshow-height-small: 475px;
$slideshow-height-medium: 650px;
$slideshow-height-large: 775px;
$slideshow-loader: #fff;
$z-index-slideshow-image: 1;
$z-index-slideshow-video: 2;
$z-index-slideshow-text: 3;
$z-index-slideshow-controls: 4;
$color-slideshow-close-bg: #fff;
$color-slideshow-close-text: #000;
.slideshow-wrapper {
position: relative;
}
.keep-ar.slideshow {
height: fit-content; //$slider-small--medium;
height: -moz-fit-content; //$slider-small--medium;
&--medium {
height: fit-content; //$slider-small--medium;
height: -moz-fit-content; //$slider-medium--medium;
}
&--large {
height: fit-content; //$slider-large--medium;
height: -moz-fit-content; //$slider-large--medium;
}
// Make sure slides fill full height
.slideshow__slide,
.slick-list,
.slick-track {
height: fit-content; //100%;
height: -moz-fit-content;
}
.slick-prev,
.slick-next {
height: fit-content; //100%;
height: -moz-fit-content;
}
.slick-dots {
bottom: 0.5em; //$gutter-site-mobile;
}
#include respond('medium') {
height: fit-content; //$slider-small--medium;
height: -moz-fit-content;
&--medium {
height: fit-content; //$slider-medium--medium;
height: -moz-fit-content;
}
&--large {
height: fit-content; //$slider-large--medium;
height: -moz-fit-content;
}
}
#include respond('large') {
height: fit-content; //$slider-small--large;
height: -moz-fit-content;
&--medium {
height: fit-content; //$slider-medium--large;
height: -moz-fit-content;
}
&--large {
height: fit-content; //$slider-large--large;
height: -moz-fit-content;
}
}
}
.slideshow {
overflow: hidden;
height: $slider-small--medium;
margin-bottom: 0;
&--medium {
height: $slider-medium--medium;
}
&--large {
height: $slider-large--medium;
}
// Make sure slides fill full height
.slideshow__slide,
.slick-list,
.slick-track {
height: 100%;
}
.slick-prev,
.slick-next {
top: 0;
height: 100%;
margin-top: 0;
width: 40px;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
.slick-dots {
bottom: $gutter-site-mobile;
text-align: center;
left: 50%;
transform: translateX(-50%);
// sass-lint:disable SelectorDepth
li button::before {
color: $color-slideshow-dots;
}
}
#include respond('medium') {
height: $slider-small--medium;
&--medium {
height: $slider-medium--medium;
}
&--large {
height: $slider-large--medium;
}
}
#include respond('large') {
height: $slider-small--large;
&--medium {
height: $slider-medium--large;
}
&--large {
height: $slider-large--large;
}
}
}
.video-is-playing .slick-dots {
// sass-lint:disable no-important
display: none !important;
}
// Pause button (focusable by keyboard only)
.slideshow__pause:focus {
clip: auto;
width: auto;
height: auto;
margin: 0;
color: $color-btn-primary-text;
background-color: $color-btn-primary;
padding: $gutter-site / 2;
z-index: $z-index-skip-to-content;
transition: none;
.video-is-playing & {
display: none;
}
}
.slideshow__pause-stop {
display: block;
.is-paused & {
display: none;
}
}
.slideshow__pause-play {
display: none;
.is-paused & {
display: block;
}
}
/*================ General slide styles ================*/
.slideshow__slide {
position: relative;
overflow: hidden;
}
.slideshow__link {
display: block;
position: relative;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
&:active,
&:focus {
opacity: 1;
}
}
.slideshow__overlay {
#include overlay($z-index-slideshow-text);
}
/*================ Slide images ================*/
.keep-ar.slideshow__image {
img {
object-fit: contain; //cover;
}
}
.slideshow__image {
transition: $transition-image-slideshow;
opacity: 0;
height: 100%;
picture {
display: flex;
height: 100%;
}
img {
display: block;
min-width: 100%;
width: 100%;
height: auto;
object-fit: cover;
}
.slick-initialized &,
.no-js & {
opacity: 1;
}
.slideshow__slide--background-video & {
opacity: 0;
}
.no-autoplay & {
opacity: 1;
}
}
// z-index stacking issues in oldIE
.ie9 {
.slideshow__slide {
// sass-lint:disable no-important
z-index: 1 !important;
}
.slick-dots {
z-index: 2;
}
}
/*================ Slide text ================*/
.slideshow__text-wrap {
height: 100%;
.slideshow__link & {
cursor: inherit;
}
.slideshow__slide--has-background-video & {
padding-top: $gutter-site * 3;
}
.video-is-playing & {
display: none;
}
.slideshow__slide.video-is-paused & {
display: none;
}
}
.slideshow__text-content {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
#include transform(translateY(-40%));
opacity: 0;
transition: $transition-text-slideshow;
transition-delay: 0.3s;
z-index: $z-index-slideshow-text;
.slick-active &,
.no-js & {
#include transform(translateY(-50%));
opacity: 1;
}
&::after {
content: '';
#include spinner(40px, $slideshow-loader);
#include animation(spin 0.65s infinite linear);
opacity: 1;
transition: all 1s cubic-bezier(0.29, 0.63, 0.44, 1);
bottom: -$gutter-site;
left: 50%;
}
.slick-initialized &,
.no-js & {
&::after {
opacity: 0;
visibility: hidden;
content: none;
}
}
}
#media only screen and (max-width: 500px) {
.keep-ar.slideshow__text-content {
font-size: 70%;
}
}
#media only screen and (max-width: 350px) {
.keep-ar.slideshow__text-content {
font-size: 60%;
}
}
.slideshow__title {
color: $color-overlay-title-text;
}
.slideshow__subtitle {
display: block;
color: $color-overlay-title-text;
}

Answer 1

I was able to fix it by just setting the height of the img to 100%.
img {
display: block;
min-width: 100%;
width: 100%;
**height: 100%;**
object-fit: cover;
}