Webインスペクタを使って、iOS版Safariの意図しないCSSを特定する
WEBサービスをつくっているとき、iPhoneやiPadのSafariブラウザ(iOS版Safari)でだけ意図しないスタイルが付いてしまうことがあります。大抵は先人が調べてくれた対処法が見つかますが、対処法が見つからなかったときはこんな風に特定したよ…の手順をまとめました。
今回調べたかったこと
datalistタグのデフォルトスタイル(ドロップダウンの矢印▼)を非表示にしたかった
デフォルトのドロップダウンの▼マークを非表示にしたかったのですが、PCのブラウザ(Safari含む)は非表示にできたのに、なぜかiOS版Safariで見たときだけ▼マークが消えない…という問題にあたりました。
Mac版Safariはこの記述で対応できたのですがiOS版では効果がなく、該当する対処法の記事も見つかりませんでした。
input::-webkit-calendar-picker-indicator {
display: none;
}
参考: https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome
手元にMacがあったら、Webインスペクタで調べてみよう
同じSafariなのになぜ…とかなしい気持ちになりましたが、実はiPhone(iPad)とMacをUSBでつなぐと、iPhone(iPad)のSafariで開いたページをMac側の開発者ツールで調べることができます。
つなぐケーブルさえあればさくっとできるので、めげずに調べてみることにします。
[手順1] Webインスペクタを使う準備をする
1. iPhone(iPad)の「⚙設定」アプリを開き、「Safari」→「詳細(一番下にある)」→「Webインスペクタ」をONにします
2. MacとiPhone(iPad)をUSBでつなぎます
[手順2] iOS Safariで該当のページを開く
iPhone(iPad)のSafariで調べたいページを開いておいて、MacのSafariの開発者ツールからページを選択します。
💡 Mac版Safariに「開発」メニューがメニューバーに表示されない場合
「Safari」>「環境設定」>「詳細」をクリックして、「メニューバーに"開発"メニューを表示」を選択すると表示されます。
[手順3] shadow DOMを表示する
要素 タブを開いた状態で右端にある〈〉アイコンをクリックすると、shadow DOMが見られるようになります。
📝 Shawod DOMとは
Web Components と呼ばれる、 Document Object Model (DOM) を部品化する仕組みを構成する要素のひとつで、普段の開発者ツールだと非表示になっています。ブラウザを描画する内部的なDOM/CSSを持っているので、特定のブラウザでだけ表示が違うな…と思ったときは、ここを調べてみると原因にたどり着けたりします。
参考: https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM
[手順4] 該当箇所を調べてみる
該当部分のshadow DOMを見てみると、▼マークは `input::-webkit-list-button` でスタイルが当たっているのでCSSでこいつを消してやれば良さそう。
Mac側で開いた開発者ツールで値を変えるとiPhone(iPad)に反映されるので、どうやったら消えるか試してみます。
● インラインでdisplayプロパティが指定されているので、`display:none` では消えない
● `!important`もすでに付いているので効かない
● content: none でやっと消えてくれた🎩
となったので、最終的には下記のように対応しました。
// style.module.scss
input {
// MacのSafari用
&::-webkit-calendar-picker-indicator {
display: none;
}
// iOSのSafari用
&::-webkit-list-button {
content: none;
}
}
実際のサービスでは、検索履歴を表示するのに使っています。
**********
フォーム要素はブラウザごとに少しずつ表示が違うので、実機で表示チェックをしたときに「あれ…こんなはずでは😇」となることが多いのですが、
● iPhoneやiPadで意図しない表示があったら、Macとつないで開発者ツールで調べてみる
● 通常の開発者ツールで見てもおかしな箇所が見つからないときは、shadow DOMも調べてみる
を覚えておくと、解決までの時間がちょっとだけ短縮されるかもしれません。それでは良いコーディングライフを👋
この記事が気に入ったらサポートをしてみませんか?