表題に関する調査ログです。

環境

  • iPhone iOS v12.1.3 Safari
  • Bulma v0.7.2

起こっていた問題

Bulmaを使っている時に、iOSだと、CSSのzoomプロパティがWebフォントのアイコンに効かない。
一方、PCのChromeやSafari、AndroidのChromeで確認すると、きちんと反映されている。

調査

効かないのはアイコンだけ?

色々試してみたところ、<i class="far fa-smile"></i>のようにWebフォントを指定した時だけでなく、<i>Hello</i>のようにiタグに文字列を入れても効きませんでした。
また、Webフォントを<span class="far fa-smile"></span>のようにspanタグに設定してみても効きませんでした。
ですが、<span>Hello</span>とspanタグに文字列を入れた場合は効きます。
状況によって、効く場合と効かない場合があるみたいです。

原因は?

結論から言うと、Bulmaで<html>に設定されていた、-webkit-text-size-adjust: 100%;が原因でした。
webインスペクタで、該当プロパティを無効にしたら、きちんとズームされるようになりました。
また、デフォルト値はautoのようだったので、Bulmaに設定されているプロパティを打ち消す形で、-webkit-text-size-adjust: auto;を追記することで、ズームを有効にすることもできました。

iOS 12.1.3 Safari
iOS 12.1.3 Safari
PC Chrome
PC Chrome

これはiOS Safariのバグ?仕様?なのかしら。