【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でもまだ、崩れた画像が残っている
そんなバグが、潜んでいそうです。
(目視チェックの範疇では、修正確認済みですが)
とはいえ。ひとまずは、これで良しとしました。