😽

Safariでのみposition: stickyが効かない!?

2021/09/16に公開

自分用のCSS格闘のメモ。
iOSとMacのSafariだけでposition: stickyが動かない。ChromeやFirefoxでは問題なく上部に固定される。

原因

固定したい要素のdisplayプロパティがdisplay: inlinedisplay:inline-blockdisplay: inline-flexなどインラインな値だと効かないらしい。<span>タグ、<a>タグあたりはデフォルトでインラインだからそのままだと効かない。

display: blockdisplay: flexにしたら固定されるようになった。

Discussion