こんな表示くずれと遭遇しました Safari編 はてなブックマーク - こんな表示くずれと遭遇しました Safari編

images

長らく更新が止まっていましたスミマセン、そのうえ今回の更新分も役に立つ記事ではありません。
今回の話は、各ブラウザの解釈の違いによる表示崩れについて。以前サイト習作を作っていたときに遭遇したものを覚え書きしておきます。

独特の解釈で泣かせるブラウザといえばIEが代表格だろうと思いますが、今回の表示崩れはsafariにて発生。そりゃモダンブラウザ間でも解釈の差異はありますよね。

初心者の足元を掬ってくれるのはIEに限った話ではないので、個人的にそこまでIEを嫌っていません。まぁ、実務で悩ませられれば順当に苦手に感じてくるのかもですね。自分のコーディングがまだ未熟なため、表示崩れや不具合をブラウザの所為ばかりにできないんです…もっとしっかり『適切なコーディング』ができれば、初めてIEに対して(または他のブラウザに対して)正当に文句の一つも言えるようになれるんでしょうけども。

※この表示崩れは、Windows版Safariのみに見られるものです。Mac版Safariではこの表示崩れは発生しません。2014.6.14追記

さて、今回の表示崩れの詳細は、以下の通り。

Safari(Win版)限定の表示崩れ【カラムの幅がやけに狭く表示される】

以前勉強のために作ったレスポンシブデザインのサイトにて、Safariのみに表示崩れが起こりました。
該当サイトは、レスポンシブ初挑戦のせいもあって、いろいろデザイン自体に問題ありきなレスポンコツデザインな代物です。その辺はあらかじめご了承いただきまして、話を進めます。

サイトのレイアウトは、左にサイドバー(トップ画像)、中央~右にメインカラム。上下にヘッダー・フッター…という配置。サイドへ縦にトップ画像を置いてみたりナビゲーションを下部に持ってきてみたりと、印象変えたい一心でイメチェンしていったら華麗に自爆しました、というレイアウトです。

横幅はブラウザに合わせて可変させるために%指定、サイドバーの幅は画像(と私の頭)の兼ね合いで固定幅にしましたが、どうにかこうにかIEでも無事表示できるようにこぎつけました(9限定ですが)。
IEで大丈夫なら他のブラウザでも大丈夫だろう、とチェックしていくと、なぜかSafariだけメインカラム幅が縮まって表示されることが判明しましたとサ…というのが今回のあらすじです。

一応、他ブラウザでは意図した通り表示されるので、さて原因は何だろう、と。
問題の表示比較はこちら

そもそもどういう作り方したんだよ

Safariだけ崩れた、といっても原因は十中八九、私の書き方のせいでしょう。
初心者のコーディングにありがちな『ひとまず思った形に表示できりゃいいや』っぽい強引な書き方とかしたんだろ? はい、心当たりがあり過ぎて目が泳ぎます。

で、このページがどのように作ってあるかというと、これです。

初心者がふわっとした理解のもとに書いたコーディング
2カラムリキッドレイアウトを作るにあたって調べてみましたが(そもそもリキッドレイアウト自体が初めてだった)、今回のデザイン(…?)と現状の理解力では、上図のような#container内にサイドバーもメインカラム(ナビ付)も内包させる形にしてしまう方が都合よく表示されたので、図の状態の構造になっています。

サイドバーに該当するトップ画像が固定幅なので、#containerの残り幅を自動的に取得してくれないかな、とメインカラムのwidthをautoに。あらためて2カラムリキッドのコード例を調べてみると、私の作り方は一般的な方法ではないように思われます。

自分の予想として、この辺のwidthやmarginの指定が問題だったかな、と考えました。表示が崩れるのは#container内の.mainContentの幅のみ。おそらくはこのレイアウトと、.mainContentのwidth:auto指定が、なんらかの解釈差によって予定外の幅を取得してしまう……のではないか?

こうやって記事にしておきながら何ですが、この原因予想、まったく自信がありません。検索しても似たような事例が見つからなかったことから、9割9分コーディングに問題があるパターンでしょう。もしブラウザ特有の解釈差によるものなら似たような事例が見つかるだろうし。

この表示崩れの原因が超基本的な『やってはいけない』HTML/CSS指定エラーだったら悲し過ぎる。おととい来やがれレベルの間違いだったら困ったもんです(私の頭が)。もしそうなら、ひっそり教えてくださいお願いします。

「今回の一件の原因は既に提示されています」

図解を描いてから、「この中にホントに原因があるのか?」と不安になったため、原因探しのためにデモページを作って各CSS指定の挙動を確認してみることに。一人答え合わせです。

結論。この中に、原因となるCSS指定がありました。

原因となったCSSは、.mainContentに指定したoverflow: hidden。Safariではある条件下において、このoverflow指定がある場合に限り、width: autoで取得される幅が通常よりも狭くなる、ようなのです。

今回のレイアウトを簡略化した、表示確認用デモはコチラ。デモページをSafariで開くと、mainContentの幅が縮小された状態になります。他のブラウザの表示と差異が見られると思います。

原因の図解
図に書いてあるように、どうやらfloat + margin調整で作った段組みで、一方を固定幅、もう一方をwidth: autoにしたとき、overflowの指定を使うとSafariにて発生する不具合のようです。
overflowについては、hidden、auto、scrollの指定が引っかかるようです(visibleならば崩れませんが、そもそも初期値がvisibleのようなので、overflow指定をしないときと同じ動作になるようです)。
もし、サイトの構造的にoverflowを指定したい向きがあれば、widthをpxや%などで数値指定すれば不具合は出ません。

そう、そもそも普通にCSS指定されてれば表示崩れしないんですよ…orz
検索しても似たような事例がみつからない、…当然だろ。発生条件揃う方が珍しいんじゃ…?

あー、もしご覧の方でSafariの解釈の仕方に詳しい人がいらっしゃいましたら、overflow指定によってどのような処理が加わり、通常とは違うwidthが取得されてしまうのか、思い当たるフシがあればぜひ、ご一報ください。

私の習作サイトは、メインカラム内の要素にfloatを使っている下層ページがあることから、overflow: hiddenの指定が必要です(この指定で要素のはみ出し崩れを回避している)。この場合、widthを数値で指定すればいいでしょう。リキッドレイアウトなので%で指定して………ません。

今回の不具合が少し興味深かったので、そのまま残してCSSハックで調整してしまいました…。ゆえに、SafariとChromeだけ幅が別指定されてます。今って、Safariだけに使うハックが無いんですね…とかいうのも含めて勉強かなー、と。

ぬるいこと言ってんじゃねぇよ、と言われればそれまでですが…。

この記事の締めの言葉は、これで決まりでしょう。
「ブラウザが悪いんじゃねぇ、俺(のコード)がアホ過ぎるんだ」
今、ものすごくそう思ってます。


« »

Comment

当ブログにお越しいただきありがとうございます。
記事に対するコメント、不備の指摘などありましたらひっそりと書き残していただけると幸いです。
※コメントは承認制となっております

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

trackback / pingback

ページトップへ