kinalog

自称フロントエンドエンジニアが何か喚いています。

Mac版Safariとoverflowとposition:fixedの話

久々に大きめのサイト構築をしているんだけど、なんかものすごい初歩的な部分でつまづいたので実験。
縦いっぱいにメニューを配置して、position: fixedにし、Y方向にはみ出た部分はスクロールできるようにする、っていう下記のようなレイアウトのページを作ります。

f:id:kasanka:20161121212502p:plain


で、上記のメニュー部分をHTML化したのがこれ。

下層コンテンツを入れ子にすることで、JSとか組まなくてもCSSだけで簡単に実装できる複数階層のメニューです。


ChromeFirefoxでは想定通り、オンマウスでメニューの右側に「はみだすエリア」が表示されてます。

f:id:kasanka:20161121214039j:plain



ところがSafariで見てみたところ、はみだすエリアが表示されてない!

f:id:kasanka:20161121214319j:plain



解決方法

半日ぐらい悩んでたんだけど、解決方法は驚くほど簡単だった。


overflow-x: visible;
overflow-y: scroll;

としていたものを、

overflow: auto;

とするだけだった(白目


色々実験してみてわかったんだけど、MacSafariにおいて、position:fixedにしたもの同士を入れ子にして、overflowをscrollにすると、子要素が強制的にoverflow:hiddenってしたのと同様の挙動をするみたい。



Safariがおかしいのか、他のブラウザがおかしいのか、そのあたりはよく仕様を読む必要がありそうだけど、とりあえずはfixed多様するようなサイトは注意が必要。