• LIGの広告成功事例
WEB

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

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

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

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

これは凶悪……コーディングのヤバいバグ&仕様 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ネタが多めになってしまいました。
これを採用する際には慎重に検討したほうがいいのかもしれません・・・。
もっといい方法をご存知でしたら、ぜひつっこんで頂ければと思います!

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

この記事を書いた人

せいと
せいと フロントエンドエンジニア 2012年入社
最近フロントエンドエンジニアになりました。
第一回HTML5カルタ大会で優勝しました。
休日の過ごし方は、"Jazz Barでスコッチを片手に『世界の終りとハードボイルド・ワンダーランド』を読む"です。

こちらもおすすめ

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ

  • 著者堀口 誠人
  • 価格¥ 2,376(2016/01/08 16:32時点)
  • 出版日2015/10/24
  • 商品ランキング89,862位
  • 単行本208ページ
  • ISBN-104797384557
  • ISBN-139784797384550
  • 出版社SBクリエイティブ