自分用のCSS格闘のメモ。
iOSとMacのSafariだけでposition: sticky
が動かない。ChromeやFirefoxでは問題なく上部に固定される。
原因
固定したい要素のdisplay
プロパティがdisplay: inline
、display:inline-block
、display: inline-flex
などインラインな値だと効かないらしい。<span>
タグ、<a>
タグあたりはデフォルトでインラインだからそのままだと効かない。
display: block
かdisplay: flex
にしたら固定されるようになった。
Discussion