【CSS】aspect-ratioを16対9にした時の隙間対策(Safari)

imgのCSSを、以下のようにした時。

width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid black;

画像とボーダーの間に、わずかな隙間ができます。
ただし、全てが狂っている訳ではなく、

  • 隙間が、あるものと無いものがある
  • 同じ画像でも、隙間があるものと無いものがある

と、まばらに崩れています。
そして

  • Safari
  • Google Chrome
  • Microsoft Edge
  • Firefox

この中では、Safariだけが崩れます。
そこで。良いのかどうかは分かりませんが、力技で直しました。

aspect-ratio: 16 / 9.01;

これで、Safariも隙間がなくなりました。
ただし、もしかしたら

  • 1pxほど、縦幅が変わる
  • Safari以外のブラウザへ、悪影響を及ぼす
  • Safariでもまだ、崩れた画像が残っている

そんなバグが、潜んでいそうです。
(目視チェックの範疇では、修正確認済みですが)

とはいえ。ひとまずは、これで良しとしました。