Androidでフォーム要素にdisabledを使うとページが半透明になるバグの対処方法

@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 でもっと簡単そうな方法を見つけました。

disabled なフォーム要素を、position:relative; を指定したボックスで囲むだけで、半透明な表示がなくなり、正常に表示されるようになりました。

かなりイミフな現象でしたが、簡単に解決できて良かった!Stack Overflowさん、ありがとう!