CSSのsubgridが主要ブラウザ全てでサポートされたということなので試してみたところ、Safari(17.0)でのみ何故か機能しない状況に陥ったため、検証してみた。
【追記 2024.04.24】この問題は、Safari Technology Preview 188にて修正済み。最新のSafari(17.4.1)で確認したところ、症状は出なくなっています。──
この時は、カードを3枚並べるようなよくある構成でテストしていた。
まずは普通にカード3枚の親となるノードでgridを構成して、各カードも「display: grid;」にして、subgridを効かせるために「grid-template-rows: subgrid;」を設定する。
subgridが効いて気持ちよく横並びの要素が揃ってくれる。順調だ。
ここで、今度は各カードの四隅を角マルにするために「border-radius: 12px;」を設定した。
当然それだけでは上部の写真部分のカドは四角のままなので、border-radiusによって丸まった輪郭の外は非表示にするために「overflow: hidden;」を設定する。
これで、Chrome、Firefox、Edgeでは想定通りの表示となって、角マルのカードが仕上がったのだが、Safariだけはここで問題が発生した。overflowを設定した途端、何故かsubgridが解除されてレイアウトが崩れてしまった。ブラウザのインスペクタで確認してみても、やはりsubgridが効いていない。
今は、原因がoverflowだと分かっているが、最初はSafariだけsubgridが効かない原因が不明で、スペルミスやgrid周りの設定の間違いやHTMLの構造の再チェックなど、随分と時間を費やして、ようやく “全く関係なさそうな” overflowを無効にしてみたところ、subgridが復活したのでこの部分が原因だと分かった。
CSSの仕様的に見ても、他のブラウザが正常に機能していることを考えても、overflowを適用するとsubgridが無効になってしまうという症状はSafari特有のバグと判断して良いだろう。
結果として、写真上部の角マルは、overflowに頼らずに写真ノードに対して「border-top-left-radius／border-top-right-radius」を適用することで解決している。overflowさえ使用しなければsubgridは問題なく機能して各カード内の要素の横並びは揃ってくれる。
思わぬところで足止めを食らったが、subgridはレイアウト効率を上げる便利な機能なので、今後は積極的に活用していきたい。そしてAppleには、早急にこのバグを修正したバージョンのSafariをリリースしてもらいたいものである。
