Mac版Safariとoverflowとposition:fixedの話
久々に大きめのサイト構築をしているんだけど、なんかものすごい初歩的な部分でつまづいたので実験。
縦いっぱいにメニューを配置して、position: fixedにし、Y方向にはみ出た部分はスクロールできるようにする、っていう下記のようなレイアウトのページを作ります。
で、上記のメニュー部分をHTML化したのがこれ。
下層コンテンツを入れ子にすることで、JSとか組まなくてもCSSだけで簡単に実装できる複数階層のメニューです。
ChromeとFirefoxでは想定通り、オンマウスでメニューの右側に「はみだすエリア」が表示されてます。
ところがSafariで見てみたところ、はみだすエリアが表示されてない!
解決方法
半日ぐらい悩んでたんだけど、解決方法は驚くほど簡単だった。
overflow-x: visible; overflow-y: scroll;
としていたものを、
overflow: auto;
とするだけだった(白目
色々実験してみてわかったんだけど、Mac版Safariにおいて、position:fixedにしたもの同士を入れ子にして、overflowをscrollにすると、子要素が強制的にoverflow:hiddenってしたのと同様の挙動をするみたい。
Safariがおかしいのか、他のブラウザがおかしいのか、そのあたりはよく仕様を読む必要がありそうだけど、とりあえずはfixed多様するようなサイトは注意が必要。