Web制作をしています。
サイトの構成は、上から
<header></header> <aside></aside> <main></main> <footer></footer>となっています。
スクロールすると、headerが最初は画面上部に消えていくのですが、mainに入ると再び降りてきて画面上部に固定される仕様にしています。
そしてheaderはもともとは白い字と青の背景色ですが、mainに入ったときは黒い字と白の背景色になるようにしています。
またheader内にはナビゲーションメニューとして「トップ」「サービス」「お問い合わせ」という各メニューが入っているのですが、その各メニューの間に、疑似要素で仕切りを作っています。
さて、このヘッダーですが、ほとんどのブラウザでは問題なく適切に表示されます。
ですがMacのSafariで見たときだけ、一瞬表示が崩れます。
どのように崩れるかというと、mainに入ったときに、header内のナビゲーションメニューの文字と疑似要素の入っている部分は黒い字と白の背景色になるのですが、そこ以外の背景が青のままです。
ですがそのような青の背景状態は一瞬のことで、すぐに白の背景に変わり適切に表示されます。
Safariのみに起きることから、Safari特有の現象であることは間違いないのですが、このような一瞬の表示の崩れも修正したほうがいいのでしょうか。
- Safariのみの現象であること
- デザインが崩れるといっても、色の変化が一瞬遅れるだけのことであり、すぐに適切に表示されること
- ヘッダーのCSSが入り組んでいること
から、修正するかどうか悩んでいるのですが(そもそも修正できるのかどうなのかも疑問に感じています)、みなさまはどうお考えでしょうか? 特定のブラウザに問題がある場合の修正についての考え方をお聞かせください。
回答1件
あなたの回答
tips
プレビュー