## Bug: `ease-card-image` `object-fit: cover` fails on Safari when card has explicit `aspect-ratio`

[Pcmhacker-piro]

Bug: ease-card-image object-fit: cover fails on Safari when card has explicit aspect-ratio

Description

When a card with ease-card-image is given an explicit aspect-ratio via CSS custom property or inline style, Safari ignores object-fit: cover on the image element. The image stretches or squishes to fill the card area instead of maintaining its aspect ratio and cropping to fit.

Steps to Reproduce

1. Link EaseMotion CSS v1.0.0
2. Create an image card with aspect ratio:

   <div class="ease-card ease-card-image" style="aspect-ratio: 16/9;">
     <img src="https://picsum.photos/800/600" alt="Random photo">
     <div class="ease-card-body">
       <h3>Card Title</h3>
     </div>
   </div>

3. Open the page in Safari v17+ (desktop or iOS)
4. Open in Chrome and compare the image rendering

Expected Behavior

The image should fill the card area while maintaining its intrinsic aspect ratio, cropping any overflow. The card's aspect-ratio should constrain the overall card dimensions, with the image covering the allocated area.

Actual Behavior

In Safari, when the card container has aspect-ratio set, the child <img> element with object-fit: cover fails to properly constrain its dimensions. The image stretches to fill the container without cropping, resulting in a distorted (squished or stretched) image. This is a known Safari rendering issue where aspect-ratio on a parent container interferes with object-fit on child replaced elements. Chrome and Firefox render correctly.

Implementation Hints

The issue involves the ease-card-image variant in components/cards.css:

/* Current implementation */
.ease-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ease-radius, 8px) var(--ease-radius, 8px) 0 0;
}

Safari fails to calculate the correct height: 100% for replaced elements when the parent has aspect-ratio. The fix should use a wrapper approach or explicit height:

/* Option A — Use a wrapper to decouple aspect-ratio from object-fit */
.ease-card-image {
  position: relative;
  overflow: hidden;
}

.ease-card-image .ease-card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ease-card-ratio, 16 / 9);
  overflow: hidden;
}

.ease-card-image .ease-card-image-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Option B — Use padding-top hack for Safari compatibility */
.ease-card-image {
  position: relative;
  overflow: hidden;
}

.ease-card-image .ease-card-image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 default */
  overflow: hidden;
}

.ease-card-image .ease-card-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Option C — Using min-height fallback for Safari */
.ease-card-image img {
  width: 100%;
  min-height: 200px; /* Fallback for Safari */
  height: 100%;
  object-fit: cover;
  aspect-ratio: attr(width) / attr(height); /* Use intrinsic ratio */
}

The position: absolute wrapper approach (Option A) is the most reliable cross-browser solution, as it avoids the Safari aspect-ratio + object-fit interaction bug entirely.

Affected Files

• components/cards.css — .ease-card-image img object-fit: cover with aspect-ratio parents on Safari

Labels

type:bug, level:intermediate, GSSoC-26

[github-actions]

Hey @Pcmhacker-piro! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside submissions/examples/your-feature-name/
• Include demo.html · style.css · README.md in your folder
• Max 2 active issues per contributor — unassign others before taking new ones

🕑 Inactivity rule: Issues with no progress for 5 days will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡