iPhoneでのみ起きるスクロールバーが表示されないCSS問題の解決方法

iPhoneやiPadでスクロールバーが表示されない・見えない問題を解決！Appleデバイス特有のスクロールバー問題をCSSで簡単に修正する方法を解説。フォームやテキストエリアの使いやすさを改善する実践的な解決策を紹介します。

Webサイトを制作していて、フォームの入力欄でスクロールできるようにした際に、なぜかiPhoneでのみ（ブラウザは問わず）スクロールバーが表示されない問題が発生しました。

数時間の闘いの後、解決しましたので共有します。

根本的な原因

スクロールバーとその背景の間のコントラストが悪いことが原因です。

つまり、配色の問題です。まあ、本来は問題ではないのですがiPhoneにとっては問題のようです。

そのため、「見えていても薄すぎる」といった問題も同様の原因で起きるようです。よく目を凝らせばスクロールバーが見えるかもしれません。

なお、わかりやすいようにiPhoneとしていますが、実は同様の問題はiPhone, iPad, MacbookのようなAppleのOSの全てで起きる可能性が高いようです。

この問題は、背景色をCSSで変更することで解決できます。

たとえば、黒系のスクロールバーを表示したい場合は、その要素に明るい背景色を設定します。

逆に、白系のスクロールバーを表示したい場合は、暗い背景色を設定します。

ためしにスクロールしたい要素の背景色を変えてみてください。

私はテキストエリア（<textarea>）のスクロールバーが表示されなくて困っていましたが、実際には表示されていないわけではなく、白いスクロールバーがずっと表示されていました。

しかし、背景色には白をCSSで設定していたので、背景色に応じて色が変わるのであれば自動で対応されそうなものですが、そのような挙動が一切なかったです。

試しに <html> や <body> 要素にも背景色として白を明示的にCSSで書きましたが、それも効果がなかったです。

一応、背景色を黒系にすると白いバーが見えるのですが、デザイン要件としてフォームのテキストエリアだけを黒系にするとダメでした。

他のWebアプリケーションの対応方法を見ていると、もう対応していないものが8割ですが、うまく対応しているものではグレー系に設定していました。

グレー系の背景色だと、白いスクロールバーが若干見えます。これは見えやすいと言えるほどではありませんが、まあ許容範囲ということで実装されているのだろうと思いました。

私も今回の開発において、テキストエリアの背景色をグレーにすることで対応することにしました。

参考記事（英語）：