@kasumiiです。こんにちは。
スマホ用ページを作成しているときに、Androidでのみページ全体が半透明になってしまうというおかしな現象が起こったので原因を調べてみたところ、以下の情報を発見。
【参考】html – Android 4.1.2 default browser – rendering issue with disabled input fields – Stack Overflow
どうやら、Android 4系でフォームの要素に disabled
を指定すると、ページ全体のレンダリングに問題が発生するというバグがあるようです。
わたしの場合は、JavaScriptでフォーム要素を動的にdisabledにした場合に起こりました。
現象:ページ全体が半透明になる
フォームのページのほぼ全体にアルファがかかったような現象が起こります。一部のフォーム要素をクリックすると、半透明が消えて正常な状態に戻ったりする場合もあり、原因不明でした。
これは、フォームのinput
要素などにdisabled
を指定したときに起こるようです。
【参考】jQuery – ヾ(o゚ω゚o)ノ゙Android4.1.2デフォルトブラウザのみ発生するdisabledバグ対応 – Qiita
上記のページでは、対応策として disabled
を使わず、操作させたくない領域の上に透明な領域をかぶせるという方法を使っていますが、Stack Overflow でもっと簡単そうな方法を見つけました。
解決方法:position : relative; のボックスで囲む
disabled
なフォーム要素を、position:relative;
を指定したボックスで囲むだけで、半透明な表示がなくなり、正常に表示されるようになりました。
かなりイミフな現象でしたが、簡単に解決できて良かった!Stack Overflowさん、ありがとう!