[bug] Teared Up Screen on starting the tauri application in Raspberry Pi

[sagar-io]

Describe the bug

I've generated the tauri template using the following commands -

cargo install create-tauri-app --locked
cargo create-tauri-app

I've not changed the code in the demo template. By following the official docs for cross-compilation, I've successfully generated the output bundle of the app for arm64 device but when I run the application on Raspberry Pi 4 B the following screen shows up -

Note that I've changed the screen size on both the tauri.conf.json and style.css file according to the Raspberry Pi screen size.

Reproduction

No response

Expected behavior

No response

Full tauri info output

[✔] Environment
    - OS: Ubuntu 22.4.0 X64
    ✔ webkit2gtk-4.0: 2.42.5
    ✔ rsvg2: 2.52.5
    ✔ rustc: 1.77.0 (aedd173a2 2024-03-17)
    ✔ cargo: 1.77.0 (3fe68eabf 2024-02-29)
    ✔ rustup: 1.27.0 (bbb9276d2 2024-03-08)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (environment override by RUSTUP_TOOLCHAIN)
    - node: 12.22.9
    - npm: 8.5.1

[-] Packages
    - tauri [RUST]: 1.6.1
    - tauri-build [RUST]: 1.5.1
    - wry [RUST]: 0.24.7
    - tao [RUST]: 0.16.8
    - tauri-cli [RUST]: 1.5.11
    - @tauri-apps/api : not installed!
    - @tauri-apps/cli [NPM]: 1.5.11

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../src
    - devPath: ../src

Stack trace

No response

Additional context

No response

[krokosik]

Unfortunately, hardware acceleration is broken on ARM and has to be disabled by setting the environment variable LIBGL_ALWAYS_SOFTWARE=1. As far as I know this is an issue with WebkitGTK and the Tauri team is working with the Servo project to utilize a more embedded friendly web engine.

Expect the UI to be laggy, even simple CSS animations worked terribly for me. This males Tauri a poor choice for RPi apps at the moment and I beliece a warning for that should be added to the docs :/

[maoosi]

I also faced the same issue, but it only appears when first launching the app. Resizing the window afterward fixes the rendering issue.

Here's a workaround that worked for me. I run this function when the app first launches:

import { getCurrent } from '@tauri-apps/api/window';

export async function appRefreshDisplay() {
  await getCurrent().hide();
  await new Promise(resolve => setTimeout(resolve, 1000));
  await getCurrent().show();
}

[mwaldownetgo]

I had the same issue and solved by hiding the window at start and opening the window after loading the site. in tauri.conf.json:

{  
  "tauri": {  
    "windows": [
      {
        "visible": false
      }
    ],
  },
}

and in my VueJS-App

import { appWindow } from "@tauri-apps/api/window";

onMounted(async () => {
  await appWindow.show();
});