Safari 11 でWeb Appが強化された

• Updated WebKit support for home screen apps.
  • Web applications saved to the home screen now support all features of modern WebKit, such as Fast-Tap, scroll snapping and the new visual viewports behavior.

ということで、Safariでは使えていたがホーム画面に追加すると動作しなくなっていた項目が動くようになり、Web Appの使い勝手が若干よくなった。
特に300msのクリック遅延問題が解決されたのは嬉しい。

しかし、またしても他の問題が出てしまっている。

ステータスバーの制御

メタタグに以下を追加することによって、ホーム画面から起動したときにURLバーなどを非表示にして、ネイティブアプリのように見せかけることができる。

<meta name="apple-mobile-web-app-capable" content="yes">

さらに以下を追加することで、見た目を変えられる。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

このcontent=black-translucentの時は、上画像のように top: 0px; が画面端にきていたが、iOS 11ではステータスバーの高さが加わった状態になる。
そのため、ステータスバーの文字色が白かつ、背景色も白なので真っ白の余白が出来てしまう。

この余白、最近どっかで見た… と思い、以下のタグを追加すると想定通りの動きになった。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

おそらく、iPhone Xの登場でSafariのレンダリング領域の概念が改められたのだと考えられる。
そのためviewport-fit=coverを追加することで、レンダリング領域を最大限まで広げられる。

iPhone XのSafariで表示される謎の空白を消す方法 - Qiita

しかし、これを追加すると今度はbottomにステータスバー分の高さの謎の余白が出る。

CSSでposition: fixed; bottom: 0;にしても、謎の余白がなくならないのでviewportの高さ計算にバグがあるような気がする。
現状これを修正する方法は見つけられていないので、content="black"かcontent="default"を使うのが良さそう。

安定しないiOSのWeb App機能

iOS 9のMobile Safariで消えた2つの機能

この記事にもあるように、Web Appの制御メタタグはiOSのメジャーバージョンアップのたびに不具合で挙動が変わっており、全く安定していない。

Supported Meta Tags

Safari HTML Referenceも数年前から更新されていないので、毎回手探りで挙動を確認しなくてはならないのがとてもつらい。