課題
next.jsで開発中、特定のプロジェクトだけスマホで開いたと時のbodyの外側が白くなった。
通常bodyにbackground-colorを指定すれば下画像のように色が統一されるはずと思っていたので四苦八苦した。
原因
manifest.jsonに"theme_color": "#fff"が指定されているのが原因だった。
適当に検索して出てきたfaviconのジェネレータが出力したmanifest.jsonを何も考えずにプロジェクトに追加したためだった。
テーマカラーはステータスバーやアドレスバーの色に影響を与えるため、知らぬ間にオーバーライドしていた。
theme-colorの記述を消すか、任意の色、今回の場合ではbodyの背景色を指定すればいい。
ただし、metadataでテーマカラーを指定する場合に、重複や競合に注意したい。