Web制作

2014.05.15(thu)

せいと

モダンブラウザでコーディングするときの詰んでるバグ＆仕様と解決方法

こんにちは、フロントエンドエンジニアのせいとです。いきなりですが皆さん、コーディング中にブラウザのバグや仕様にぶつかって、解決策をググってみてもヒットせず「ヤバい、詰んだ」的な状況になったことはありませんでしょうか。

古いバージョンのIEとかAndroidならネットに蓄積された情報がけっこうあるのですが、ChromeやIE11で動作がおかしくなると、比較的情報が少ないので困ります。

今回はそんな「モダンブラウザ（PC）」に焦点を当てて、コーディングのレアケースなトラブル5つと、実際にそれをどう回避したのかをご紹介します。

モダンブラウザでコーディングするときの詰んでるバグ＆仕様と解決方法

やばい、詰みそう…いや、まだだ！

<a>タグに「position:absolute」を指定してホバー時にスタイルを変えようとすると中のテキストが一瞬太字になる（Safari）

以前、「position:absolute」を使ってホバーすると動くボタンを実装したことがあったのですが、safariで見るとホバーした瞬間テキストが太字になる現象に遭遇しました。ちなみに<button>要素では問題なし。

解決方法

いろいろやってみましたが、結局「position:absolute」を外すのが一番手っ取り早かったです。「position:relative」なら問題ないので、そっちを使うか、marginを利用するなどして代用しましょう。

jQueryとCSS3でアニメーションさせたらチカチカしたりギクシャクしたりする（Safari）

jQueryのanimateや、CSS3のtransition、transformを使ったらSafariで色々ヤバい動き方をしてました。

解決方法

色んな症状があるので解決方法もいくつかあります。以下に自分が遭遇した具体的な事例を紹介します。

jQueryのアニメーションが綺麗に動かない

CSS3のtransitionなら正常になることがあります。safariだけそちらで実装してみるといいと思います。

CSS3のtransitionが綺麗に動かない

jQueryのアニメーションなら正常になることがあります。safariだけそちらで実装してみるといいと思います。

アニメーション指定した要素がチラつく、関係ない部分がチカチカ動く

疑似要素を使っていませんか？疑似要素とアニメーションを併用するとろくなことになりません。
アイコンなど簡単な装飾は:beforeや:afterで実装したいところですが、面倒でも<i>や<span>を使うことをおすすめします。

スクロールすると付いてくるヘッダーを実装したら動きがガクガクになる（Chrome）

スクロールすると付いてくるヘッダー、別名スティッキーヘッダーは使用頻度がお高めですが、Chromeで確認すると動きがガクガクになってしまうことがありました。

解決方法

あくまで自分が体験した事例ですが、#wrapperなどの大枠の要素に「overflow:hidden」を設定しており、これを外すと解決できました。

似たようなことをツイッターでつぶやいていたOZPAさんに助けを求めたら解決できました。ありがとうございますありがとうございます。

Facebookのいいね！ボタンとCSS3のアニメーションを使ったページを閲覧するとアニメーションが動かなくなる（IE11）

JS抜きで綺麗な動きをしてくれるのでCSS3のアニメーション(@keyframes)をよく使うのですが、いいね！ボタンが入っているページにこれを使うと、IE11では動かなくなります。なぜ（´・ω・`）

解決方法

結論だけいうと、以下のJSのコードを埋め込むことで解決しました.

(function(d) {
     'use strict';
     d.documentMode === 11 && !d.createStyleSheet && (d.createStyleSheet = function(s, i) {
         var o = d.createElement('style'), x;
         s && (x = new XMLHttpRequest(), x.onreadystatechange = function() {
             x.readyState === 4 && x.status === 200 && (o = d.createElement('link'), o.setAttribute('rel', 'stylesheet'), o.setAttribute('href', s));
         }, x.open('GET', s, false), x.send(null));
         i && (x = d.styleSheets, x[i]) ? (x = x[i].ownerNode, x.parentNode.insertBefore(o, x)) : d.querySelector('head').appendChild(o);
         return o.sheet;
     });
 })(document);

こちらの情報はWEB制作会社W3Gさんのサイトに載っておりました。ありがとうございますありがとうございます。
なんでこれで直るのか、といった詳しい解説もありますので、気になる方は読んでみてください。

「Google Maps API」使ってみたら変な線が入る（Chrome）

カスタマイズしまくってオシャレなGoogleMapを実装しよう！と思って頑張ってみたら、下図のような線が入ってしまいました。

スクリーンショット_050114_064049_PM

しかもChromeだけ。。

解決方法

APIのバージョンを変えることで解決できました。

// 変更前
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
// 変更後
<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>

src部分の「js?」の後ろに注目です。「v=3.14」ここは省略可能ですが、記述することでバージョンを細かく指定できます。とりあえずversion3.14では正常に動きました。