iphoneでaspect-ratioが効かない

iphoneだとsafariもChromeも効かない。PCのChromeでは問題無い。

やろうとしていることは、高さが90pxの親要素の中に正方形の子要素を作りたい。

このとき、子要素は高さをheight: 100%とし、width: auto、つまり高さを基準にして横幅を自動的に決めるというもの。

HMTLは、

<div class="parent">
  <div class="child">ABC</div>
</div>

CSSは、

.parent {
  height: 90px;
}
.child {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
}

回避策として、widthをauto以外で指定する。つまり自動で正方形はあきらめる。

.child {
    height: 100%;
    width: 90px;
}

便利なプロパティだけど、まだiPhoneには対応しきれていないようなので使わないのが吉。