WEB

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

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

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

古いバージョンの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);

 

引用元:♪NAI NAI NAI IEじゃない (c) シブがき隊 IE11はIEであってIEじゃない、IEとして扱おうとすると…♪そこが危NAI

ありがとうございますありがとうございます。
なんでこれで直るのか、といった詳しい解説もありますので、気になる方は読んでみてください。

「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では正常に動きました。

※7/4 11:00 引用元について追加修正いたしました。

まとめ

詰んだわ

いかがだったでしょうか。余談ですが、実はちょっと前にこんな記事「これは凶悪……コーディングのヤバいバグ&仕様 Best5」も書いております。よろしければこちらも合わせてご覧ください。

また、以下のサイトが参考になったので、紹介しておきます。それでは、また!

 

参考:Google Maps JavaScript API v3公式

参考:IE11から削除されたdocument.createStyleSheetによる不具合例 by W3G様

この記事を書いた人

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