CSS Display Grid在Mobile Safari 17.4.1中失效问题求助

问题背景 #

需要实现正方形图片网格，图片在正方形容器内居中显示，该效果在桌面端及Chrome、Firefox、Edge等移动端浏览器均正常，但Mobile Safari 17.4.1中失效；桌面端运行代码片段正常，移动端打开Stack Overflow运行片段则失效。

原代码如下：

CSS #

.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));grid-gap: 4px;}.grid::after {display: none;}.grid-item {aspect-ratio: 1;}.grid-item>img {width: 0;height: 0;min-height: 100%;min-width: 100%;display: block;object-fit: cover;}

HTML #

<div class="card">
  <div class="grid">
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/200/300" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/200/500" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/500/300" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/500/200" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/500/1200" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/1200/500" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/200/300" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/200/500" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/500/300" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/500/200" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/500/1200" alt="img"></a>
    <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900"><img src="https://picsum.photos/1200/500" alt="img"></a>
  </div>
</div>

解决方案 #

Mobile Safari 17.4.1对aspect-ratio结合min-width:100%/min-height:100%的布局逻辑存在兼容性问题，尤其是当容器为<a>标签时，可通过以下两种方案修复：

方案一：用padding-top实现稳定正方形容器 #

该方案为传统兼容写法，可适配所有浏览器版本：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 4px;
}
.grid::after {
  display: none;
}
.grid-item {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 利用padding比例实现正方形 */
  overflow: hidden;
}
.grid-item>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方案二：修正网格项显示属性并简化图片样式 #

通过显式设置<a>标签为块级元素，简化图片尺寸规则，避免Mobile Safari的解析异常：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 4px;
}
.grid::after {
  display: none;
}
.grid-item {
  aspect-ratio: 1;
  display: block; /* 强制a标签为块级元素 */
  overflow: hidden;
}
.grid-item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

说明 #

• 方案一的padding-top写法兼容性极强，完全规避aspect-ratio在Safari中的潜在问题；
• 方案二保留aspect-ratio的现代写法，仅通过调整元素显示属性和图片尺寸规则修复兼容性，代码更简洁。

内容的提问来源于stack exchange，提问作者Colin