スクロールと同時に固定される要素をCSSで気軽に実装出来るposition:sticky;。IEでは使えませんが手軽に綺麗に実装出来るのでよく使っているんですが、先日思わぬバグを見つけました。
Safariではdisplay:inline-block;を指定するとstickyは効かない
これ明らかにブラウザのバグではと思うんですが、position:sticky;を指定している要素のdisplayがinline系だとなぜかstickyが作用しません。
他の対応ブラウザはちゃんと作用するのに…！なぜSafariだけ…！（IEなど知らぬ）
なのでまあ、解決策は単純にstickyを使いたい要素のdesplayはblock系にするだけで良いんですけれども。
モダンブラウザでこういった想定外の挙動をされると原因の究明に時間がかかってしまい辛い…。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
