Mobile Safari v10.3.2で文字が少し大きくなる現象がこのウェブサイトで起きていた。再現条件がはっきりとしたことがわからない。何かしらリペイントがかかると想定通りの文字サイズに変わるので、CSSがおかしいということはなさそうだ……と思ったがメディア・クエリーでのrem単位に絡むバグだった。
最初、defer属性のあるscript要素を外すとちゃんと表示されるようだった。元に戻すのも簡単そうなので、まずはasync属性で動くように書き換えることにした。しかしうまく直らない。直ったように見えたのは再読み込みした時だけのようで、これではないらしい。
他にHTMLの最小化やコンテンツ・ブロッカーを疑ってみたが、それらでもないようだ。
初心に戻ってCSSを見直したところ、CSSでrem単位を複数のメディア・クエリーで使い、かつその最後のクエリーの中で文字サイズを変更すると起こるようだ。どうも文字サイズの指定がvw単位の時だけでもあるようだが、定かではない。
Demo: rem Unit in Media Queries
Mobile Safari v10.3.2でしか再現しない。本来なら描画領域が60rem、つまり960px以上にならないと文字サイズが200%にならないはずだが、iPhone 5sのポートレート(縦)で200%になってしまう。何らかのリペイントがかかると正常な表示になるのは上記の通りだ。知られているバグと違って、ブレークポイントが仕様通りに設定されない類のバグではない。
対策はpxかem単位を使うというだけで、今まで通りで良い。iOS v10が出たあたりのWebKitでrem単位の扱いが直ったようなので解禁したが、まだ早かったようだ。