Weird Carousel with object-contain in Safari IOS

[sira313]

Hi,

I'm not sure if this is a bug, a browser support issue, or a mistake on my part. I need some assistance. When I apply object-contain to images of different heights in a carousel, something strange happens only on Safari iOS. The image is not vertically centered; instead, it aligns to the top. It works fine on other browsers and operating systems like Windows, Android, and Linux.

Here’s an example of my code:

<div class="carousel">
    <div class="carousel-item w-full">
        <img
            src="image400x400.jpg"
            alt="Cover"
            class="object-contain"
        />
    </div>
    <div class="carousel-item w-full">
        <img
            src="image400x200.jpg"
            alt="Cover"
            class="object-contain"
        />
    </div>
</div>

You can see my full code here.

Here are my current dependencies:

@11ty/eleventy 2.0.1
@sherby/eleventy-plugin-files-minifier 1.1.1
@tailwindcss/typography 0.5.13
daisyui 4.12.10
eleventy-plugin-lazyimages 2.1.2
pagefind 1.1.0
tailwindcss 3.4.6

Here’s the result in Safari iOS 17.5.1:
Carousel In Safari

thanks in advance