最近出会えた！新たなバグ！！ | やくにたたないメモ帳

ど〜も〜、久々にランニングしたら両足筋肉通なたかの人です！

日々の運動ってほんと重要ですよね、、、
特にこの業界は下っ腹が出てきます。

これは、本格的にダイエット開始かな！
なんて言いつつ、アイスを食べてます(´◉◞⊖◟◉`)b

さて、今回は、日々の業務で見つけたバグ＆注意点を一気に紹介したいと思います！
それでは、レッツスタート！！！

case1：vw,vhのバグ

ずっと敬遠していましたが、使ってみると使い勝手がよかった！
調子に乗って多様していたら思わぬ落とし穴が。。。

iPhoneXでのvhと%の違い

モーダルを実装したときに発覚したのですが、どうやら100vhと100%で若干高さが異なるようです。

100vhだとメニューを含む高さ 、100%だとメニューを含まない高さの指定になってしまうようです。

IE11でのvwの挙動

ご存知の通りvwとはview widthの略です。
名前の通り本来は画面の横幅が基準となるのですが、IE11だけ正規の動きと異なる場合があります。
親要素が画面幅より大きいとき、画面の横幅ではなく親要に依存してしまうようです。
width: 100%;と同じ挙動になってしまうようです。

case2：calcのバグ

IE9以上から使用できたプロパティですが、IE9にも多少バグが潜んでいました。
IE9が本格的にターゲットブラウザから外れたので安心していたら、まだありました。。。

IE11でcalcのアニメーションがない

calcを使って2カラムのレイアウト実装時に発覚しました。
サイドメニュー閉じるボタンを実装をしたのですが、IE11 のみアニメーションなしでパッと切り替わってしまいました。
調査した所、 IE11にはcalcのアニメーションが用意されていないようでした。
アニメーションが発生する所にcalcは使用できないと知っておくことで、手戻りが少なくなると思います。

case3：transformのバグ

比較的新しいプロパティのためか、まだまだバグが潜んでいそうです。。。

edgeでtranslate3dのアニメーションが効かない

edgeでtranslate3dのアニメーションが効かないバグに遭遇しました。
デフォルトポジションからtransform: translate3d(100px, 0 ,0)に動かすアニメーションを実装したのですが、うまくいきません。
対策として、デフォルトポジションでtransform: translate3d(0, 0 ,0)を宣言することでうまく動きました。
言われれば納得するのですが、見逃しがちです。

scaleが震える

hover時に写真をズームさせたい時、transform: scale(1.1);を使用して写真を拡大しました。
ほとんどのブラウザで問題ないのですが、IE11、edgeの問題児だけアニメーション中に小刻みに震えるというバグが発生しました。
対策としてなぜか transform: scale(1.1) rotate(.1deg);を指定すると震えが止まりました。
理由は不明です。。。。

case4：background-attachmentのバグ

background-imageを固定できたりするプロパティです。
使用頻度が高くないので、逆にハマってしまいました。

background-attachment:fixed;が効かない

PCでは基本的に問題ありません。珍しくIE11でもバッチリ動きます。
問題はSPです。。。。
android標準ブラウザはもちろん比較的優等生なiOS Safariも動きません。
対策として、このように対策しました。

擬似要素をposition: fixed;で画面に固定してしまいます。
このままではずっと表示されてしまうので、z-index: -1;でコンテンツの下に滑りこませています。
非表示にしたいコンテンツではbackground-color: #fff;など背景色を指定すると大人しく消えてくれます。
逆に背景ありで表示させたい場合は、下記のように設定します。

擬似要素で背景を作り、z-indexさらにマイナスにしてあげると、うまく実装できます。

case5：backface-visibilityのバグ

今回初めて使ったプロパティ。
主にカードを回転させるようなCSSアニメーションを実装するときに使用します。

IE11ではもちろん動かない

一応、動くのですが、3d描画と致命的に相性が悪いようです。

Can I use（backface-visibility）

よって、カードをめくるようなときにしか使わないこのプロパティが全く役に立ちません。
対策として、他のブラウザではbackface-visibilityを使って実装し、IE11だけ@keyframesで無理やり実装いたしました。

case6：heightのバグ

heightのバグなんて根絶したと思っていたのですが、ありました。。。

height: 100%;が効かない

Android4.4の標準ブラウザにて発生いたしました。
親要素の高さを指定し、子要素をheight: 100%;と指定したのですが、height: 0。
なぜか%が効きませんでした。。。
ここは、大人しくjsでUA判定して限定対応いたしました。
ちなみに、vh,vwは問題なく動きます。

case7：font-familyのバグ

webフォントのせいなのか、新しいバグに遭遇いたしました。

font-familyの書き順による不具合

これもAndroid4.4の標準ブラウザにて発生いたしました。
webフォント'Noto serif Japanese'を設定をした状態で、明朝系のfont-familyを下記のように設定しました。

font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho,'Noto serif Japanese', serif;
明朝フォントがないAndroid系のみ'Noto serif Japanese'を適用したかったので、あえて'Noto serif Japanese'の優先度を落としました。

Android4.4で見事に'Noto serif Japanese'が当たりませんでした！
というより、明朝系のフォントが丸っと無視されてAndroid特有の可愛らしいゴシック体が当たっていました。

どうやら、ある程度フォントが見つからないとデフォルトのフォントファミリーで表示されてしまうようです。

対策として、Android系の明朝体には'Noto serif Japanese'のみ宣言しました。

case8：その他忘れがちな設定・仕様

その他、バグまでは行かないのですが、忘れがちな設定や仕様的なものをまとめました！

z-indexとtranslate3dの優先度

要素の重なりをコントロールするために使用されるz-indexですが、z-index: 9999;にしても最前面にならないことがあります。
そもそもの親要素同士の優先度ということもあるのですが、見逃しがちなのが、translate3dの存在です。
実は、z-indexよりz軸を直接コントロールできるtranslate3dの方が強い場合もあります。
ほとんどのブラウザではz-indexの方が優勢でしたが、safari系のブラウザではtranslate3dの方が最前面に表示されます。
safariは要注意かと思います。
translate3dはcssアニメーションにはよく用いられるので、真っ先に疑ってみるのもいいかと思います。

autoprefixerの設定

autoprefixerが入っているかと思って安心して実装していたら、Android4.4系でtransformが機能しませんでした。
調べてみると、autoprefixerの設定のようです。
デフォルト開発環境の設定では`browsers: [‘last 2 versions’]`となっており、Android4.4は見事に漏れております。
設定ファイルを`browsers: [‘last 2 versions’, ‘Android >= 4.4’]`に変更してあげましょう。

line-heightのみの指定

aタグなどでボタンを作成する時、ボタンの高さを`line-height`だけ指定して横着していませんか？
私はよくやります（笑）
IE11では要素によって`line-height`だけでは高さを保持できないので、必ず`height`指定もしましょう！

zoom対応ブラウザ

「あれ、画面サイズを縮小すると要素が入らない！」
「zoomかければいいんじゃね？」
という会話よく聞きます（？）よね！
実はzoomはもともとIE独自のプロパティでした。
後追いでChrome,safariも対応してきましたが、規則に忠実なFireFoxには対応しておりません。
タブレット、SPに関しては、ターゲットブラウザからFireFoxが外れることが多いので、許容できますが、PCレイアウトにおいてzoomを使用するのは控えましょう！

意外と忘れるmainタグ

ページのメインの要素にとりあえず囲っておくmainタグ。
場合によってmargin: 0 auto;などを付与する時があるかと思います。
他のブラウザでは中央化されるのに、なぜかIEだけ中央化しない！なんてことありますよね？
実は、mainタグIEではブロック要素と認識されていないようです。
共通のcss等でmain要素にdisplay: block;としてあげましょう！

電話番号水色問題

サイト内に電話番号を仕込む時、「SPでは電話をかけたいけど、PCではかけたくない！」なんて要望も多いかと思います。
最近ではPCの時だけcssでpointer-events: none;を当てればクリックしてもかからなくなるのですが、edgeではとんだお節介機能があります。
電話番号らしき文字列を検出したら勝手に水色になるという問題です。
回避のためにはを設定してあげる必要があります。
haedタグ内でUA判定をして動的に付与してあげましょう。

©︎水色問題

追記
回避方法を探ってみると、© の文字実体参照は 3 種類あることがわかりました。左からⓒ Ⓒ © で表示させたものです!

この3種類は著作権マークがフォントや文字セットで利用できない場合のために作られたものらしく、意味は同じなようです。
サイズもCの感じも微妙に違いますよね? お好みのものを使用してください!

サムソンブラウザ問題

最近のAndroid系のデフォルトブラウザはChromeに統一されつつあるのですが、Galaxyだけは別です。
サムソンブラウザという独自のブラウザが実装されています。
Galaxyはシェア率もそこそこ高いので、注意が必要かもしれません。
現状発見した大きなバグといたしましては、twitter,facebookの公式のシェアボタンが非表示になるというものです。
意図的なのかバグなのかは不明です。。。

おまけ
最後に、完全に主観で各ブラウザの印象をまとめました（笑）
参考にはならないかと思いますので、息抜きにどうぞ。

Chrome
お節介やき。
開発にも使っているためバグを生みづらい。
ただ、よしなに対応してくれることが多く、他のブラウザで見た時崩れている時もある。
時折、バージョンアップで思いもせぬバグに出会うことあり。

FireFox
真面目な優等生。
W3C通りに作られているイメージ。
Chromeがよしなにしてくれた所に、現実を突きつけてくる。
フォントがいまいち。

Safari
基本的には優等生。
ただpaddingのとり方が微妙に違ったり、細部までこだわる時に差異が発生する。
フォントは綺麗に表示されるが、何も宣言しないと自動で明朝にしようとするというお茶目な一面もある。

IE11
問題児。
IE9がサポート終了で一気に楽になったが、調子に乗って新しい実装をするとこいつでつまずく。
また、win7のIE11とwin10IE11で挙動が異なる時があるので要注意。
基本的にwin7の方が優秀な気がする、、、
2020年のwin7のサポート終了時にターゲットブラウザから外したい。。。

edge
IE11より若干まし程度の不良。
表示はまぁ綺麗な方だが結構融通の効かないブラウザ。
IE思想を引きずっているためか、IEとedgeのみ不具合という時が多々ある。

iOS Safari
PCのSafariに比べてバグが多いイメージ。
思いもよらないバグが上がってきたときにひやっとする。
Xcodeによる検証ができるので、まだ楽。

Chrome for Android
PC版Chromeとほとんど同じ挙動なので特に心配ない。
が、早く明朝をデフォで入れて欲しい。
Androidのためにwebフォントが必要になることもしばしば。

Android 標準ブラウザ
サポート切りたい第一位！
デバック方法が確立してないため、基本的にトライ＆エラーで修正していくこともしばしば。。。
フォントがとにかくひどい。
ベンダープレフィックスをつけ忘れると大変なことになる。