Permalink
Fetching contributors…
Cannot retrieve contributors at this time
72 lines (48 sloc) 4.86 KB
layout page_type page_datetime page_id page_tag page_cover page_description page_title
./src/html/post.pug
post
2018-02-28T18:58:07
94
CSS
環境依存バグを踏むとワクワクさん
280blockerはiOS Safariにユーザースタイルを追加する

ハンドルネームつながりで越智建設のウェブサイトを見ていたら、手元のiPhoneでページが真っ白で何も見えない状態だった。

ochikensetsu.co.jpにアクセスした画面。読み込みは完了しているが画面は白いままになっている。サーバーエラーでもなさそうだ。

macOS SafariでUSB接続デバッグをすると、fontplus.jsでエラーが出てるとか<meta content="viewport">の値がカンマ区切りであるべきところがセミコロン区切りになってるとかあったが、だからと言って何もレンダリングされないのはおかしいだろうと思って首を傾げた。

そこで要素に当たってるスタイルをちゃんと洗っていたら、class="ad-preview-smart"ユーザースタイルが適用されているのに気づいた。

[class^="ad-"]:not(body) {
  display: none !important;
}

泣く子も黙るdisplay: none !importantである。しかも前方一致の属性セレクタである。

iOS Safariでochikensetsu.co.jpを閲覧してmacOS SafariからWebインスペクタを使ってスタイルを確認した。するとdisplay:none!importantが適用されているdivがあるのがわかった。

注目すべきはこのスタイルのオリジンが「ユーザースタイル」であること。UAスタイルでもなくウェブサイトが読み込んだスタイルでもない。iOS Safariにはデフォルトでユーザースタイルを設定できる機能はない。ここでようやく外部アプリの介入に思い至った。そういえばそんなアプリを入れた記憶がある。

広告非表示アプリ 280blocker

280blockerとはSafariを利用中に出る広告をある程度ブロックしてくれるアプリ。インストールすると全てではないが確かに広告の表示は減る。

このアプリが原因かどうかを探るのは簡単だった。アプリを起動するともう設定画面なので、「広告ブロック」をトグルするだけ。もしくはホワイトリストにドメインを登録してもいい。

iOS版280blockerを起動した画面。広告だけでなくSNSなどのアイコンも非表示にする機能がある。

広告ブロック機能をオフにしてから件のウェブサイトにアクセスすると、きちんと表示された。

ナビゲーションやコンテンツが表示されている。これが越智建設のあるべき姿である。さしずめOchi Prideと言ったところか。

Webインスペクタで確認すると、class="ad-preview-smart"に当たっていたdisplay: none !importantがなくなっている。やはりこのアプリが原因とみて良さそうだ。

280blockerで広告ブロックをオフにしてから越智建設にアクセスし、Webインスペクタでスタイルを確認すると、当該要素にユーザースタイルが適用されていないことがわかった。

一応検証用に[class^="ad-"]がたくさんある検証ページを作った。280blockerで広告ブロックを有効にしているとTKG写真が一枚も表示されない。

http://lab.dskd.jp/280blocker/

上記リンクのHTMLソースを抜粋するとこうなっている。

<body>
  <h1>280blockerで広告ブロックを有効にしている時にTKG写真が表示されないかテスト</h1>
  <p>280blockerが有効だと <code>ad-</code> で始まるクラス名の要素が非表示になる。</p>
  <img src="2017-12-25 08.20.24.jpg" class="ad-tkg">
  <img src="2017-12-27 08.53.37.jpg" class="ad-da">
  <img src="2018-01-05 08.43.40.jpg" class="ad---">
  <img src="2018-01-18 08.02.36.jpg" class="ad-01">
  <img src="2018-02-05 08.19.54.jpg" class="ad-">
</body>

[class^="ad-"]:not(body) {display: none !important} が適用されていればTKG写真は一枚も表示されないだろう。

このアプリがどういう仕組みで広告をブロックしてるのか知らなかったけど、それっぽいセレクタをdisplay: none !importantしているとは思わなかった。確かにこれなら要素内のリソースは通信しない。

と言うことで、広告ではない要素にad-なクラス名をつけると280blockerのようなツールが要素を非表示にしてしまう可能性があるという事例だった。このことは覚えておいた方が良さそうだ。