safari で aspect-ratio を指定したら、高さ出ない

slickでaspect-ratioをしてしたが、safari で高さがでずに表示崩れが発生した。
ちなみに、Chromeでは問題なく表示された。

結論：height を指定すればいい

imgタグをfigureで囲っていて、その外のdiv.mv__imgへaspect-ratio: 800 / 999;を指定していた。

下のような感じで、.mv__img 配下はheight: 100%を指定していた。

.mv__img {
  width: calc((862 / 1600) * 100%);
  max-height: 1000px;
  overflow: hidden;
  aspect-ratio: 863 / 1000;
  height: 100%;
  figure {
    height: 100%;
  }
  img {
    object-fit: cover;
    height: 100%;
  }
}

↓ .mv__imgへheght: 100%;を追加

.mv__img {
  width: calc((862 / 1600) * 100%);
  max-height: 1000px;
  overflow: hidden;
  aspect-ratio: 863 / 1000;
  height: 100%;
  figure {
    height: 100%;
  }
  img {
    object-fit: cover;
    height: 100%;
  }
}

これでOKとなりました！

結論にたどり着くまでにしたこと

img タグを疑う

img の出力をWordPressのthe_post_thumbnail();を使用して行っていたので、そちらが原因かと思い。WordPressの関数を使用して、サムネイルの出力を複数パターン試した。

うまく出力されないこともあるし、なんかブラーがかかってしまうこともあった。(詳しく調べていないので、原因不明です)

slick を使っていたので slick を疑う

slick を疑ってみたが、まったく分からず特に対処せず。

感想

safari の検証ツールがメッチャ使いにくい…(ただなれていないだけかもですが)

もうWordPressはコリゴリです(今回WordPressは関係ない)