Using margin
on a CSS Grid child doesn't work well with aspect-ratio
on iOS 18.3.2.
<div class="grid-parent">
<div class="grid-child">1</div> <div class="grid-child">2</div> <div class="grid-child">3</div>
<div class="grid-child">4</div> <div class="grid-child">5</div> <div class="grid-child">6</div>
<div class="grid-child">7</div> <div class="grid-child">8</div> <div class="grid-child">9</div>
</div>
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 3px;
background-color: #FF0000;
color: #FFFFFF;
}
.grid-child {
aspect-ratio: 1;
margin: 3px;
background-color: #0000FF;
color: #FFFFFF;
}
false
The aspect-ratio
property is far from the oldest but it has a pretty solid 94.53% browser support.
For those who aren't using an affected iOS device, here's a picture of the bug in action:

But surprisingly, it worked just fine on another device running an earlier version of iOS 18. I don't remember the exact version and have updated the device since then. Now, it's broke.
If you're looking for a quick hotfix, you can use a border with the same color as the background instead of a margin on the child elements.
<div class="grid-parent">
<div class="grid-child">1</div> <div class="grid-child">2</div> <div class="grid-child">3</div>
<div class="grid-child">4</div> <div class="grid-child">5</div> <div class="grid-child">6</div>
<div class="grid-child">7</div> <div class="grid-child">8</div> <div class="grid-child">9</div>
</div>
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 3px;
background-color: #FF0000;
color: #FFFFFF;
}
.grid-child {
aspect-ratio: 1;
border: 3px solid #FF0000;
background-color: #0000FF;
color: #FFFFFF;
}
false
Although this won't work well if you're already using a border or if the background isn't a solid color.
Bugs like this aren't too out of the ordinary. But from my experience, these kinds of bugs are far more common on Safari. Specifically iOS. Every other browser that I've tested works just as intended.