グローバルメニューの要素に、position:sticky を設定しイイ感じに実装できたーっ\(^^)/となっていたが、safariで閲覧すると、見事にレイアウト崩れが発生。
ガッカリ(Chromeで開発しているので全然気づかなかったんですよね)
position:sticky を使わずに position: relative; を使ってレイアウトを設定することで解決した。
症状が、この「position:fixed;で下側に固定したとき、親要素にposition:fixedの設定がされているとiphone safariでスクロール時にズレた動きになる」と同じ感じで、スクロールすると後追いで、動かないはずのグローバルメニューが動いてレイアウトが崩れている。
さらに調べると、「safariで表示崩れ対処法」に書いてあるのと同じで
原因は、「header 要素に、position:sticky、子要素に position:fixed を設定」だった。
header 要素に、position:sticky を設定し、子要素のグローバルメニューの要素に position:fixed を書いていて、、ビンゴだった。
もう一つ参考記事はこちらの「iOS環境でpositionはズレるらしい(CSS)」