🌋

SafariのCSS対策

2022/08/14に公開

CSS

2022年6月16日, IEのサポート終了により我々Webエンジニアの心には安寧がもたらされました. しかし, その平和も束の間, 長くは続きませんでした. かのSafariによってエンジニアの心は再び漆黒の闇に包まれてしまったのです.

環境

OS X Yosemite 10.10.5
Safari 10.1.2

FlexboxのGap

flexのgapは新しいSafariでも未だに動かないようです. 以下を参考に, Safariの時だけFlexbox子要素の方にmarginを付けると解決できました. 間違ってFlexboxの親の方に付けたりもしましたのでお気を付けください. 必要に応じて:first-childや:first-lastも併せてご利用ください.

@media not all and (min-resolution:.001dpcm) {
  @supports (not (translate: none)) {
    // Safari 14.0.x だけに適用される CSS
  }
}

position: absolute;

position: absolute;はちょっとズレたりするらしいですね.

position: sticky;

position: sticky;はdisplay: inlineなどと組み合わせると使えないらしいですね. display: flexだと使えるとこのことですですが, なぜか動かない. 調べたところposition: -webkit-sticky;の併記も必要だったようです. これで解決しました.

position: -webkit-sticky;
position: sticky;
display: flex;

おわりに

個人的に生じていた問題は解決したので一旦ここまでにします. 他にも問題が見つかったら追記します.

環境

FlexboxのGap

position: absolute;

position: sticky;

おわりに

Discussion