Tauri+Next.jsの画面がRaspberyPi4の環境で画面が崩れる

Question

実現したいこと

勉強を兼ねてTauri+Next.jsの環境でデジタル時計を作っています
※下記がそのソースコードです
DaiGuard/signage-app

x86_64環境では問題なく下記のように表示されるのですが、RaspberryPi4などのaarch64環境では表示が崩れてしまうため修正したい

発生している問題・分からないこと

画面の表示が崩れてしまう

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ここのサイトを参考にデバイスファイルに対するパーミッションを変更してみた

しかし、変化はなかった

Zenn tauri

sudo usermod -aG video $USER
sudo usermod -aG render $USER

補足

signage-app@0.1.0 tauri
tauri info

[✔] Environment
- OS: Debian 12 X64
✔ webkit2gtk-4.0: 2.42.4
✔ rsvg2: 2.54.7
✔ rustc: 1.75.0 (82e1608df 2023-12-21)
✔ cargo: 1.75.0 (1d8b05cdd 2023-11-20)
✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
✔ Rust toolchain: stable-aarch64-unknown-linux-gnu (default)
- node: 20.10.0
- npm: 10.2.3

[-] Packages
- tauri [RUST]: 1.5.4
- tauri-build [RUST]: 1.5.1
- wry [RUST]: 0.24.7
- tao [RUST]: 0.16.5
- @tauri-apps/api : not installed!
- @tauri-apps/cli [NPM]: 1.5.9

[-] App
- build-type: bundle
- CSP: unset
- distDir: ../out
- devPath: http://localhost:3000/
- framework: React (Next.js)
- bundler: Webpack

Answer 1

難しい問題に取り組まれていますね!
私はLinux環境で利用していないので、解決策は分かりませんが調べたことを共有します

まずアップロードされた画像からwebkit2gtkでの描画処理に問題が発生しているのが予想されます

x86_64環境では問題なく表示されているとのことなので、お使いのaarch64の端末で正常にwebkit2gtkが動作するかを検証すると問題が切り分けられそうです

例えば、インストールしているグラフィックドライバの影響やハードウェアアクセラレーションの有無、CPUやGPU処理能力、メモリの不足、で問題が発生しているかもしれません

この場合はwebkit2gtk単体で任意のウェブサイトを表示してみるとと確認できます

Tauri内の問題については、リポジトリを検索したところWEBKIT_DISABLE_COMPOSITING_MODE=1でCPUによる描画へ切り換えて、似た問題が解消したユーザーもいるようでした

https://github.com/search?q=repo%3Atauri-apps%2Ftauri+WEBKIT_DISABLE_COMPOSITING_MODE&type=issues