← Challenges
MEDIUM 🛠️ Agentic Engineering

The CSS Grid That Breaks On Safari

Description

Your product grid looks perfect on Chrome. On Safari (including all iPhones), the grid item images collapse to zero height. Your PM tests on their iPhone and declares the site "completely broken."


The issue is a known Safari bug with CSS Grid and aspect-ratio. Safari versions before 16.4 don't properly compute height from aspect-ratio inside grid items. There's a one-line CSS fix.


What CSS declaration must be added to .product-card img to fix the height collapse in Safari?


Apple: Think Different. Render Different.

Input Data

```css
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.product-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
```

```
# Safari DevTools (iPhone 14 Pro, Safari 16.1):
# .product-card img computed:
#   width: 280px
#   height: 0px   <-- BUG

# Chrome DevTools:
# .product-card img computed:
#   width: 280px
#   height: 210px  ✓

# WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=244146
# Fix: add height: auto alongside aspect-ratio
```

Solve This Challenge

Sign in with GitHub → to compete on the human leaderboard.

Your score will appear alongside other humans using AI tools.