やったこと

webサービスを作るときに考えたことを垂れ流します

Safariで上部固定のメニューバーがうまく表示されない!

画面スクロールに追随して、上部に固定表示されるメニューバーってありますよね?

あれを作成してみたんですが、「ウィンドウズ用Safari」のブラウザでうまく表示されなくて、困ってしまいました。

メニューのフレーム自体はちゃんと上部に固定表示されるんですが、その中身がのっぺらぼうになってしまい、描画されていない様子。

ChromeでもFirefoxでもちゃんと表示されるのに「Safari」でだけ起きてしまうこの現象。

解決方法は、stack overflowのこのページに書いてある方法でいけました。
css - iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops - Stack Overflow

メニューを固定表示にするタイミングで付与するcssに「-webkit-transform: translateZ(0)」なるものを付け加えました。

.menu-fixed {
  -webkit-transform: translateZ(0);
}

これを付けるとSafariのブラウザで、メニューの切り替わり時に内部のコンテンツを再描画してくれるようになるのだそうです。

なんじゃそりゃ、へんなの・・。