これは凶悪……コーディングのヤバいバグ&仕様 Best5

これは凶悪……コーディングのヤバいバグ&仕様 Best5

セイト

セイト

こんにちは。LIGフィリピン支社代表のせいとです。
コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。

今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。
なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。

これは凶悪……コーディングのヤバいバグ&仕様 Best5

第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる

ohno_man
IE9.jsを採用したサイトをIE7,8で見ると、

<class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/>

こんなものが追記されていたりします。
こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがないとHTML5が使えない。。。

解決方法

cssで高さを0に設定するとよいです。

CSS
.ie7_class6{
	height:0 !important;
	}

↑こいつが複数ある場合は全てに「height:0 !important;」を指定する必要があるため、ちょいと厄介です。

第4位 PIEが効かない。

ohno_man2
CSS3未対応のブラウザに一部のCSS3セレクタを適応させてくれる「PIE.htc」ですが、CSSの記述の仕方がちょっと独特です。
普通にCSS書いただけでは反応なし、なんてことも。

解決方法

僕のおすすめは以下の2つを実行することです。

  • PIE.htcは使わない。PIE.jsを用いる。
  • 背景画像の複数指定は諦める。

PIE.htcはIE9.jsとの併用や、htaccessの設定うんぬんのせいでうまく作動しないことがありました。
PIE.jsだとあっさり動いたので、こっちのがいいと思います。
背景画像の複数指定は1枚目しか表示されなかったり、綺麗に表示できないこともあったので、僕の場合は諦めました。(´・ω・‘)
また、いろんなところで言われている「position:relative」や「zoom:1;」の指定も有効だと思います。場合によっては使っていきませう。

コードの書き方例としては↓こんな感じです。

html
<div class="pie">
かどまる
<div>
CSS
.pie{
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	zoom: 1;
	position:relative;
}
JS
$(function() {
    if (window.PIE) {
        $('.pie').each(function() {
            PIE.attach(this);
        });
    }
})

第3位 iPhone/iPadのSafariで画像が表示されない

ohno_cat
iPhone/iPad版Safariだと表示できる画像のサイズに制限があるそう。(データの形式にもよりますが)
リピートできない背景画像を使用する際は特にご注意を。

解決方法

画像を分割して表示させる、というのが一番でしょう。
背景画像の場合は面倒ですが、分割した上でCSS3の背景の複数指定を使用するのがベスト。

CSS
background: url(../images/bg1.jpg) 0 0 no-repeat, url(../images/bg2.jpg) 0 500px no-repeat, url(../images/bg3.jpg) 0 1000px no-repeat, url(../images/bg4.jpg) 0 1500px no-repeat, url(../images/bg5.jpg) 0 2000px no-repeat;
}

また、CSS3が使えないIE8以下には、↓の方法で対処するといいです。

  • IE9.jsを使う
  • PIEを使う
  • Media Queriesを使ってタブレット用の記述を別で書く

第2位 SNSボタンの「LINE」が消える&変な位置に吹っ飛ぶ

ohno_lady
SNSボタンの「pocket」と「LINE」を一緒に置くと、「LINE」が変な位置に吹っ飛んだり、姿を消すことがあります。
他のSNSのボタンなど置いても問題はなく、「LINE」だけ吹っ飛ぶようです。LINEかわいそう。

解決方法

「pocket」の

<script>~</script>

部分を</body>タグの直前に記述すると直ります。
なぜこうすると良いかは、弊社CTOでエンジニアのづやさんが丁寧に解説してくれたのですが、よくわからなかったので割愛します。

第1位 WEBフォントとIE9.jsを併用すると、IE8で全体的にヤバいことになる

ohno_granma
正確に言うと、「@font-face」と「IE9.js」を併用すると起こる不具合で、IE8で閲覧すると、フリーズ、リンクが効かない、過度に重くなる、…etcなどの症状が発生します。
また、IE9.jsの代わりにselectivizr.jsを用いても同様の不具合が起こります。
しかもIE9,10の開発ツールでは確認できない現象なので、相当やっかいです。

解決方法

解決用パッチなるものもあるようですが、配布元がはっきりしなかったので、僕の場合は組み直しました。(´・ω・)
現状は、解決用パッチを使うか、WEBフォントの使用をやめるか、IE9.jsを外すか・・・恐ろしや。

まとめ

なんだかIE9.jsネタが多めになってしまいました。
これを採用する際には慎重に検討したほうがいいのかもしれません・・・。
もっといい方法をご存知でしたら、ぜひつっこんで頂ければと思います!

参考にさせていただいた記事など

※現在はアクセスできません。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

セイト
セイト Ex-President & VPoE at LIG Philippines. / 堀口 セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。 初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL