以前書いた記事「detailsタグで作るアコーディオン。CSSだけで実装可。アクセシビリティにも対応」を久々に見直したところ、デモコードの矢印が盛大にバグっていました。

事象はPC版のChrome124系とEdgeで確認。Chromiumエンジン系のブラウザトラブルです。

リリース時は問題無かったので、ブラウザアップデートでいつの間にか発生していたようです。

以前はheight値を省略して問題なかったが……

びよ～んと伸びている原因はすぐにわかりました。

矢印のheight値を省略していた結果、縦中央揃えの為に付与していたposition: absolute;により引き伸ばされていました。

.ico {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  aspect-ratio: 1/.6;
  margin: auto;
}

※関係箇所のコードのみ抜粋

position: absolute;を使って垂直方向を中央揃えする場合、marginを使って上下から互いに対象を引っ張ります。その際、height値を設定していないと、対象自体が引き伸ばされてしまいます。今まではaspect-ratioを設定すれば、height値を省略しても問題ありませんでした。

しかしバグなのか仕様が変わったのか、どうもposition: absolute;設定中はheight値が指定無し(auto?)と同等の扱いになっている模様。検証ツール上はちゃんとwidthとaspect-ratioの設定だけでheightは算出出来ているはずなのだが、うーん何故だろう。

height値を固定すれば解決する問題ですが、ここに固定値を設定してはaspect-ratioを使用する意味が無くなってしまいます。レスポンシブ時にwidthの変更だけで同じ比率を維持させるのが目的なので、ここを固定させるわけにはいきません。

【失敗】とりあえずfit-contentで解決 ※追記：iOS系だとダメな模様

aspect-ratioによる算出結果を超えないよう、試しにfit-contentを使ってみたところ上手くいきました。

fit-contentは対象の最小寸法を算出するプロパティです。使用意図としてはaspect-ratioによる算出値を最小寸法として代入しているイメージ。一応今のところ意図した結果にはなっているため、一旦はこれで様子を見ます。

.ico {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  height:fit-content;
  aspect-ratio: 1/.6;
  margin: auto;
}

アイコンにposition: absoluteを指定するのは、中央揃えにする手法としてポピュラーなものの1つだし、そのアイコンにレスポンシブ対応を考えてaspect-ratioを設定しているケースも多いと思います。とりあえず現状はheight:fit-content;で応急処置が出来る模様なので参考にしてください。

仕方がないのでcalcでアスペクト比を手動計算

追記した通りiOS系で検証したらダメでした🤪　Windows、Androidでは問題無かったのだが……。うーん。当初思っていたより厄介になってきた。

heightを書けば済む話ですが、アスペクト比の自動化だけは譲るわけにはいきません。

そこでcalcを使用してアスペクト比を手動で記述する事にしました。せっかくaspect-ratioがあるのに何故俺はわざわざこんな事を……。

.ico {
  --arrow-size: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--arrow-size);
  height:calc(var(--arrow-size) * .6);
  margin: auto;
}

そもそもposition: absolute;を止めれば？

おっしゃる通りw　矢印の位置制御を flexやgridで代替すればこの問題は発生しません。

しかしflexやgridを使った場合、不意にテキスト部分にspan等の要素を挟まれるとjustify-contentやgrid-template-columnsの制御がややこしくなる。それを防ぐためにテキスト部分に包括要素が必要になったりとそれはそれで面倒です。最初からそれ前提で組んでいれば問題無いけれども。。

何かとレガシー扱いされるabsoluteですが、コンテンツの領域に直接干渉しない点は便利であり、まだまだ使い道はあります。そのためなんとかこの手法を使ったままこの事象は解決したいところです。

2024.5.2 追記：min-width:0;で対処出来る

追記です！heightを省略してもmin-width:0;を付与すれば対処出来ることがわかりました。

.ico {
  --arrow-size: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--arrow-size);
　min-width: 0;
  aspect-ratio: 1/.6;
  margin: auto;
}

参考になったのは、以下の記事です。

【CSS・Chrome 124】aspect-ratioを使っているページが何もしていないのに壊れた

https://zenn.dev/kagan/articles/css-chrome-aspect-ratio

この記事の執筆者の、かがんさんはdisplay: grid;設定時に子要素の横幅が崩れるトラブルだったようですが、こちらも同様の方法で対処出来ました。

Chromeでaspect-ratioまわりの処理が変わったのは確実です。これらの挙動を見るにバグだと思います(思いたい)が、いつ修正されるのかもわかりませんので、当面はmin-width:0;をセットで付与したいと思います。