Viewport Units BuggyfillとpurgeCSSを併用するときはappendToBodyを付ける

小ネタです。

Viewport Units Buggyfillは、iOS Safari で vh を使ったスタイル指定をしたときに表示が崩れてしまうといった問題に対処できるライブラリです。

以下のように、例えば Vue であれば実行しておくだけで実行したページ内の vh の問題を修正しておいてくれます。

onMounted(async () => {
  // iOS Safariで100vhを完璧には判定してくれない問題に対するPolyfill
  // @see https://github.com/rodneyrehm/viewport-units-buggyfill
  const viewportUtils = (await import("viewport-units-buggyfill")).default;
  viewportUtils.init();
});

しかし、ここに加えて purgeCSS を実行すると、どうやら本ライブラリによって vh を修正するために当たったスタイルを消してしまうようです。
※挙動ベースの確認のみ行いました。厳密なファクトチェックは行っていません。悪しからず

ということで、以下のように body タグ内にスタイルを挿入するオプション{ appendToBody: true }を 指定 しておくことで解決できます。

onMounted(async () => {
  // iOS Safariで100vhを完璧には判定してくれない問題に対するPolyfill
  // @see https://github.com/rodneyrehm/viewport-units-buggyfill
  const viewportUtils = (await import("viewport-units-buggyfill")).default;
  viewportUtils.init({ appendToBody: true });
});