1.前提
-
対象: Cloudflare PagesでデプロイしたアプリがSafari だけ白画面になり、Console に
SyntaxError: Invalid character '\uFFFD'が出る人
2. 結論
- Cloudflare Pages が Zstandard (zstd) 圧縮 を誤って配信すると
iOS Safari でSyntaxError: Invalid character '\uFFFD'が発生し白画面になる -
Rules › Compression Rules で zstd を無効化し
Brotli + Gzip のみ許可 → Caching › Purge Everything → 復旧
3. なぜ起こる？（原因）
- iOS Safari は zstd 非対応
- Cloudflare Pages が Accept‑Encoding に zstd が無いリクエスト にも zstd を返すことがある
- 伸張失敗 → null 文字置換 →
\uFFFD→ JS 解析エラー
4. 再現・調査手順（具体例）
curl -I https://<your-site>/<JS チャンク> \
| grep -E 'content-encoding|content-type'
-
content‑encoding: zstdが付いていれば本件
5. 解決手順（詳細）
5‑1. Cloudflare Dashboard で Compression Rule 追加
| フィールド | 設定例 |
|---|---|
| When incoming requests match |
*.pages.dev/* or 独自ドメイン |
| Compression |
Enable Brotli and Gzip Compression （zstd はチェックしない） |
保存後 Caching › Purge Everything。
5‑2. iOS 端末でハードリロード
アドレスバーを下へスワイプ → ⟳ 長押し → 「キャッシュを消去して再読み込み」。
5‑3. 確認
curl -I https://<your-site>/<JS/CSS> | grep content-encoding
# -> br または gzip
6. まとめ
- iOS Safari の白画面は zstd 配信が犯人かも
- Compression Rule で zstd を無効化 → Purge → 再読込 で即解決
- デプロイ後は
curl -Iでcontent-encodingを CI 監視 しよう