私はバックエンドが主ですが、先日リリースしたサービスで、CSSで設定したはずのbackgroundが効いてない！という事態が発生して急遽フロントの対応をしたので、そのことについて記録しておきます。
原因
タイトルにもある通り、カラーコードを用いて透明度を指定していたのが悪さをしていたようです。
.class {
background: #ffffffaa;
}
最初はこのように記述していましたが、Androidで背景が透明になっていることが判明し、Android Studioのエミュレータを用いて調べました。（後々気付きましたが、iOS Safariでは透明度の部分だけ無効化され、完全不透明の白背景になっていました。）
調べ方については下記のサイトを参考にしました。いやー、Android Studioもともと入れてて良かった。
PCでAndroid端末のブラウザチェックをして、検証までやってしまおう！
解決までの道のり
確かにエミュレータのブラウザでも背景が透明になっている、、、
CSSがどのように作用しているかを見てみると、指定したbackgroundが無視されてrgb(0,0,0,0)となってるじゃないか、、、
ということで色々いじってみました。
.class {
background: #ffffff;
}
うん。完全不透明の白背景になった。これは効くのか。
.class {
background: rgb(255, 255, 255);
}
そら効くだろ。当たり前だ。
.class {
background: rgba(255, 255, 255, .8);
}
あ！！ちゃんと透過されてるじゃないか！
opacityで透過させたくない時は、カラーコードではなくrgba()を使いましょう。
解決してみれば、とてもしょうもないものでした。恥ずかしい、、、
最後に
カラーコードでの透明度指定はPCブラウザだと有効なので、当たり前のように有効だと思い込んでしまってました。思い込みは怖いですね。
あとは、バグが起きた時にググることも大事ですが、エラーが起きている部分を自分の目でチェックするのはもっと大事ですね。今回の件でも、ググってみてこれが原因なんじゃないかと推測したものは全て見当違いでした。ところがAndroidエミュレータでいじってみたら、いままでの苦労をあざ笑うかのように一瞬で解決しました（笑）
おそらく多くのエンジニアの方にとっては当たり前のことなんだろうかと思いますが、この経験が誰かの救いになれば幸いです。