[tauri] アプリの背景色を透明にするときはまった話

tl;dr

tauri.config.jsonでdecorations: false、transparent: trueを設定し、macOSPrivateApiも設定する。

{
  "app": {
    "windows": [
      {
        "width": 360,
        "height": 280,
        "decorations": false,
        "transparent": true,
        "shadow": false,
        "fullscreen": false,
        "resizable": false,
        "maximizable": false
      }
    ],
    "macOSPrivateApi": true
  }
}

今回試したこと

Webviewの方でborder-radiusをかけたら、角に白い部分が残っていた。

bodyタグ、htmlタグにbackground: transparentをかけても直らなかった。
vueのアプリであったため、id="app"の要素にもcssをかけてみたが直らず...

tauri.config.jsonの見直し

decorations: false、transparent: trueを設定するとできるという話を複数見かけた。これでいけた人が多そうだったが、それでも直らず

解決：macOSPrivateApiの設定

v1のドキュメントに以下のようなことが書いてあったので、試してみたら成功

Note that on macOS this requires the macos-private-api feature flag, enabled under tauri > macOSPrivateApi. WARNING: Using private APIs on macOS prevents your application from being accepted to the App Store.

v2のドキュメントにも書いてそうではあるが、読みづらすぎて全然目に入らなかった。。。

おわりに

このように長く詰んでるとき、結局はドキュメントで解決することが多い。
もっと読み込もう.. tauri v2のドキュメントもう少し読みやすくしてくれないかな