質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1164閲覧

Web制作をしていますが、Safariで見たときに一瞬、デザインが崩れます。ただしすぐに適切に表示されます。このような一瞬の崩れも修正したほうがいいですか?

cheshire-cat

総合スコア72

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/31 09:16

編集2021/07/31 09:38

Web制作をしています。

サイトの構成は、上から

<header></header> <aside></aside> <main></main> <footer></footer>

となっています。

スクロールすると、headerが最初は画面上部に消えていくのですが、mainに入ると再び降りてきて画面上部に固定される仕様にしています。
そしてheaderはもともとは白い字と青の背景色ですが、mainに入ったときは黒い字と白の背景色になるようにしています。
またheader内にはナビゲーションメニューとして「トップ」「サービス」「お問い合わせ」という各メニューが入っているのですが、その各メニューの間に、疑似要素で仕切りを作っています。

さて、このヘッダーですが、ほとんどのブラウザでは問題なく適切に表示されます。
ですがMacのSafariで見たときだけ、一瞬表示が崩れます。

どのように崩れるかというと、mainに入ったときに、header内のナビゲーションメニューの文字と疑似要素の入っている部分は黒い字と白の背景色になるのですが、そこ以外の背景が青のままです。

ですがそのような青の背景状態は一瞬のことで、すぐに白の背景に変わり適切に表示されます。

Safariのみに起きることから、Safari特有の現象であることは間違いないのですが、このような一瞬の表示の崩れも修正したほうがいいのでしょうか。

  1. Safariのみの現象であること
  2. デザインが崩れるといっても、色の変化が一瞬遅れるだけのことであり、すぐに適切に表示されること
  3. ヘッダーのCSSが入り組んでいること

から、修正するかどうか悩んでいるのですが(そもそも修正できるのかどうなのかも疑問に感じています)、みなさまはどうお考えでしょうか? 特定のブラウザに問題がある場合の修正についての考え方をお聞かせください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/07/31 09:36 編集

再現できるコードを提示してください。 中身のないHTMLだけ提示されても何とも言えません。
退会済みユーザー

退会済みユーザー

2021/07/31 10:18

私は彼のコードを読み、内容を完全に理解した。 それは「再現できるコード」である。
m.ts10806

2021/07/31 10:55 編集

そもそもHTMLすらまともに理解できてない人に答えられるものではないです。 この文章だけでは誰も質問者と同じコードはおこせない。コードを書いているのは質問者だけだから。 私に対抗したいだけならやめたほうがいい。自分で自分の評価を下げるだけ。
guest

回答1

0

自己解決

質問をし直すことにします。

投稿2021/07/31 09:43

cheshire-cat

総合スコア72

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/07/31 09:45

質問編集すればいいのでこれで「解決した」とするのは横暴です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問