[bug] Blank screen on starting tauri application

Question

[bug] Blank screen on starting tauri application

yang282441848 opened this issue 2 years ago · 37 comments

Describe the bug

I create a new taur-app with vue scaffolding, but it does not working properly, it shows blank white screen.
It seems like https://github.com/tauri-apps/tauri/issues/4638

All resources(js svg and html)loaded, but application's body is blank.
And websocket is fine(with ping message).
No error/warning message in console.
All elements exists in the html dom.
When I drage these elements, It shows below.
Http server works well.
I tried to run cargo build and cargo build --release, but it seems nothing changed.

Reproduction

Install any missing dependencies.

sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

and I did not run sudo apt update
2. Create Tauri app with pnpm create tauri-app, selecting vite+vue scaffolding.
3. In ${MyAppDir}, run pnpm run install;
4. Run pnpm run tauri dev

Expected behavior

Content appears in window.

Platform and versions

pnpm run tauri info
> test@0.0.0 tauri /home/nvidia/yx/test
> tauri "info"


Environment
  › OS: Ubuntu 18.04 X64
  › Node.js: 18.8.0
  › npm: 8.18.0
  › pnpm: 7.11.0
  › yarn: Not installed!
  › rustup: 1.25.1
  › rustc: 1.63.0
  › cargo: 1.63.0
  › Rust toolchain: stable-aarch64-unknown-linux-gnu

Packages
  › @tauri-apps/cli [NPM]: 1.0.5
  › @tauri-apps/api [NPM]: 1.0.2
  › tauri [RUST]: 1.0.5,
  › tauri-build [RUST]: 1.0.4,
  › tao [RUST]: 0.12.2,
  › wry [RUST]: 0.19.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../dist
  › devPath: http://127.0.0.1:3000/
  › framework: Vue.js

App directory structure
  ├─ src-tauri
  ├─ dist
  ├─ public
  ├─ node_modules
  ├─ src
  └─ .vscode

package.json

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  },
  "dependencies": {
    "vue": "^3.2.37",
    "@tauri-apps/api": "^1.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "vite": "^3.0.2",
    "@tauri-apps/cli": "^1.0.5"
  }
}

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm build",
    "devPath": "http://127.0.0.1:3000",
    "distDir": "../dist",
    "withGlobalTauri": false
  },
  "package": {
    "productName": "test",
    "version": "0.0.0"
  },
  "tauri": {
    "allowlist": {
      "all": true
    },
    "bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "deb": {
        "depends": []
      },
      "externalBin": [],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "com.tauri.dev",
      "longDescription": "",
      "macOS": {
        "entitlements": null,
        "exceptionDomain": "",
        "frameworks": [],
        "providerShortName": null,
        "signingIdentity": null
      },
      "resources": [],
      "shortDescription": "",
      "targets": "all",
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "test",
        "width": 800
      }
    ]
  }
}

Stack trace

No error/warning message.

Additional context

No response

Answer 1 · 2022-09-06T12:06:46.000Z

Is it an actual Linux installation or a VM (or WSL) ? (Looks like an actual installation to me, just wanna be sure)

Did you try your same app on a newer version of Ubuntu by any chance?

Can you check the version of webkit2gtk via apt-cache policy libwebkit2gtk-4.0-37 please?

and I did not run sudo apt update

Are there relevant updates available tho?

Did you try other templates besides the vue one?

Answer 2 · 2022-09-06T12:23:07.000Z

First of all, thanks for you help.

Is it an actual Linux installation or a VM (or WSL) ? (Looks like an actual installation to me, just wanna be sure)

It's an actual Linux installation.

Did you try other templates besides the vue one?

I'll try, but I don't think it can work property.

Did you try your same app on a newer version of Ubuntu by any chance?

It seems that 18.04 is a stable Ubuntu version.I'll do something more to check it.

Can you check the version of webkit2gtk via apt-cache policy libwebkit2gtk-4.0-37 please?

I'll provider other information tomorrow.

Are there relevant updates available tho?

I don't think so. When I run ldd ${app}, it looks all works well.

Did you try other templates besides the vue one?

I'll try later.But it looks like nothing different here, it event cannot render h1 lable.

Answer 3 · 2022-09-06T12:34:21.000Z

It seems that 18.04 is a stable Ubuntu version.I'll do something more to check it.

Yeah stable, but also really old, it didn't receive any new webkit updates for quite some time now :/ But anyway, i didn't see this behavior last time i checked 1804 so that shouldn't matter 🤔

Answer 4 · 2022-09-07T01:09:47.000Z

Here is webkit2gtk infomation.

# apt-cache policy libwebkit2gtk-4.0-37
libwebkit2gtk-4.0-37:
  Installed: 2.32.4-0ubuntu0.18.04.1
  Candidate: 2.32.4-0ubuntu0.18.04.1
  Version table:
 *** 2.32.4-0ubuntu0.18.04.1 500
        500 http://ports.ubuntu.com/ubuntu-ports bionic-updates/main arm64 Packages
        500 http://ports.ubuntu.com/ubuntu-ports bionic-security/main arm64 Packages
        100 /var/lib/dpkg/status
     2.20.1-1 500
        500 http://ports.ubuntu.com/ubuntu-ports bionic/main arm64 Packages

Did you try other templates besides the vue one?

I have changed to use reactor template, and nothing changed

Answer 5 · 2022-09-07T01:55:10.000Z

All elements in html is invisible, but webkit is still painting and rendering.

Answer 6 · 2022-09-08T06:58:53.000Z

I found something more.

Run src-tauri/target/debug/${app} directly, only the debug mode will try to connect with http server obviously.
Text Could not connect: Connection refused shows.
Run npm run dev to start a http server. App still shows a blank screen, though all resources loaded.
Stop npm http server and application.
Run python -m SimpleHTTPServer 3000 to start a new http server and restart the debug-app, then debug-app will display these html elements. However all will be invisible again after click Reload.Something goes wrong after opening the webkit's inspector.
Create a new index.html with <head><head><body>Hello</body> and restart the debug-app, it works too.

Answer 7 · 2022-09-12T14:02:15.000Z

set vite.config.ts#server.host=true, like this

Answer 8 · 2022-10-13T10:47:38.000Z

I think I'm having the same issue but in a different form. My page isn't fully rendered, even though everything appears to be fine in the dev tools. I'm also on WebKit (macOS).

Answer 9 · 2022-10-19T12:44:55.000Z

I've been experiencing partial renders and unexpected Vite errors followed up by a reload and everything being back to normal at first launch before, I thought that was normal and does not occur when built in release mode.

Now I am experiencing the same problem as described originally (same project but on a different machine).

Both machines run NixOS with very similar configs. Both have nVidia cards. ~~The issue occurs under both X11 and Wayland~~.

For purity reasons I created a new Vite project with npm create tauri-app which also did not work, but interestingly resulted in a slightly different problem (see screenshot).

Answer 10 · 2022-10-19T14:08:44.000Z

Just figured something out, decided to post separately instead of editing.

I was not running Wayland like I thought i was. Switching back to Wayland resolves Tauri apps not working on this machine.

This does not concern the partial rendering and random Vite errors which means that is a separate issue.

@yang282441848 I think you should try running your app under Wayland, it would help the maintainers isolate the issue

Answer 11 · 2022-11-11T15:21:29.000Z

Found a workaround that let me launch my application.

WEBKIT_DISABLE_COMPOSITING_MODE=1 node dev.mjs # or whatever command you use to launch the app

The issue is caused by a WebKitGTK bug, tracked here.

The issue is not related to Tauri and can be closed.

Answer 12 · 2023-01-06T19:32:49.000Z

FYI, got the same on Steam Deck earlier, WEBKIT_DISABLE_COMPOSITING_MODE=1 fixed as well

Answer 13 · 2023-01-31T09:31:21.000Z

The same fix works with Ubuntu 20.04, X11 desktop environment + i3 window manager + Compton compositor.

Answer 14 · 2023-01-31T09:34:53.000Z

FYI, got the same on Steam Deck earlier, WEBKIT_DISABLE_COMPOSITING_MODE=1 fixed as well

It works, thx.

Answer 15 · 2023-02-03T01:09:16.000Z

Completed? An env var workaround is not a fix. I think this should stay open until the bug is fixed upstream in WebKit. Or has a WebKit update already been completed elsewhere?

Answer 16 · 2023-02-03T01:31:11.000Z

Completed? An env var workaround is not a fix. I think this should stay open until the bug is fixed upstream in WebKit. Or has a WebKit update already been completed elsewhere?

Ok.

Answer 17 · 2023-05-25T17:32:49.000Z

Found a workaround that let me launch my application.
WEBKIT_DISABLE_COMPOSITING_MODE=1 node dev.mjs # or whatever command you use to launch the app
The issue is caused by a WebKitGTK bug, tracked here.

The issue is not related to Tauri and can be closed.

Thanks, this solved the same issue I was having on NixOS.

Answer 18 · 2023-06-21T02:43:11.000Z

Mark.

No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 20.04.3 LTS
Release:	20.04
Codename:	focal

The view is flipped in webkit

but normal in the chromium browser.

Found a workaround that let me launch my application.
WEBKIT_DISABLE_COMPOSITING_MODE=1 node dev.mjs # or whatever command you use to launch the app
The issue is caused by a WebKitGTK bug, tracked here.

The issue is not related to Tauri and can be closed.

Fixed by set env.

Answer 19 · 2023-09-08T16:44:43.000Z

I am having the same blank screen but rendering issue, but only when users are running wayland. Specifically, It works fine on Steam Deck, but a user switched to upstream Arch on their Deck and when using wayland this issue occurs

Answer 20 · 2023-09-08T16:53:09.000Z

I use wayland, and no fix has ever been effective for me IIRC. I could only reboot.

It happens after using the app for long hours.

Answer 21 · 2023-10-25T14:41:46.000Z

I resolved my app with export WEBKIT_DISABLE_COMPOSITING_MODE=1 .
Before I setting that environment, I can't even open the web-view console.

Answer 22 · 2023-12-28T17:14:58.000Z

WEBKIT_DISABLE_COMPOSITING_MODE=1

I'm noting that on GNOME X11 I need WEBKIT_DISABLE_COMPOSITING_MODE=1,in GNOME Wayland and XFCE (X11) I don't need it.

Answer 23 · 2023-12-30T00:04:37.000Z

WEBKIT_DISABLE_COMPOSITING_MODE=1
I'm noting that on GNOME X11 I need WEBKIT_DISABLE_COMPOSITING_MODE=1,in GNOME Wayland and XFCE (X11) I don't need it.

I am using XFCE (X11) and I need the workaround to run my app properly.

Answer 24 · 2023-12-30T02:48:29.000Z

replying to

WEBKIT_DISABLE_COMPOSITING_MODE=1 node dev.mjs # or whatever command you use to launch the app

WEBKIT_DISABLE_COMPOSITING_MODE=1 npm run tauri dev

Worked for me

OS: Fedora Linux 37 (Xfce) x86_64
DE: Xfce 4.16
WM: Xfwm4
WM Theme: Default-hdpi
Theme: Adwaita-dark [GTK2/3]
Icons: Adwaita [GTK2/3]

Thanks!

Answer 25 · 2024-01-26T18:16:52.000Z

When using nVidia drivers on linux the following environment variable must be set to prevent the following errors and blank Tauri window.

export __NV_PRIME_RENDER_OFFLOAD=1

Errors;

KMS: DRM_IOCTL_MODE_CREATE_DUMB failed: Permission denied
Failed to create GBM buffer of size 800x600: Permission denied
KMS: DRM_IOCTL_MODE_CREATE_DUMB failed: Permission denied
Failed to create GBM buffer of size 800x600: Permission denied
KMS: DRM_IOCTL_MODE_CREATE_DUMB failed: Permission denied
Failed to create GBM buffer of size 800x600: Permission denied
Failed to create EGL images for DMABufs with file descriptors -1, -1 and -1

Answer 26 · 2024-01-26T18:24:54.000Z

This application is still in dev

Answer 27 · 2024-02-11T14:45:37.000Z

I wonder how the new solution compares to mine. It seems to be a better one because it disables a lot less, only an nVidia feature instead of an entire WebKit one. At the same time the name of that variable kind of suggests that it is not really intended for public use. Should I update my solution and point whoever finds it to this one instead?

Answer 28 · 2024-03-03T06:40:53.000Z

I have been experiencing the same problem running a Tauri application within an X11 session of GNOME on Nvidia card due to an environment variable setup that was previously required. However, after enabling DRM Kernel Mode Setting (KMS) in my bootloader, the Tauri app now runs smoothly without needing the environment variables. I found the solution on arch wiki https://wiki.archlinux.org/title/NVIDIA#DRM_kernel_mode_setting. I use 550.x.x Nvidia driver, not sure how it will work with drivers that were released earlier

Answer 29 · 2024-03-03T16:38:15.000Z

@TheRosya's solution seems to be a kernel parameter, which may be a hard ask for some users - this seems to only effect linux platform, we could check this setting and set the related env variables. Thoughts?

To summarize, so far we have the following possible fixes related to these render issues;
export __NV_PRIME_RENDER_OFFLOAD=1
export WEBKIT_DISABLE_COMPOSITING_MODE=1
(kernel param) nvidia_drm.modeset=1

Summarizing symptoms;
Blank application window - no objects rendered
Blank fonts/Fonts cut off - no fonts rendered
Trailing/Clipping - repeating graphical artifacts

Answer 30 · 2024-04-28T04:22:39.000Z

dev:
Debian 12 has this problem too, but only on vscode integrated terminal, apply export WEBKIT_DISABLE_COMPOSITING_MODE=1 is ok.
The terminal that comes with the system is normal.

pakeged:
Must apply export WEBKIT_DISABLE_COMPOSITING_MODE=1.

Linux debian 6.1.0-20-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.85-1 (2024-04-11) x86_64 GNU/Linux

Answer 31 · 2024-05-05T08:32:37.000Z

I'm having the same issue with the release binary, also notice that resize the window will fix the rendering problem.
I apply the workaround at run time by adding
std::env::set_var("WEBKIT_DISABLE_COMPOSITING_MODE", "1"); at the main function.
my environment it's a raspberry pi 5

Answer 32 · 2024-05-12T19:06:21.000Z

Setting std::env::set_var("WEBKIT_DISABLE_COMPOSITING_MODE", "1"); first on main.rs fixes the blank screen issue on start and also fixes the window resize flicker. But it introduces a new issue where it will show a blank white screen for few milliseconds on start. To fix this, you can add "transparent": true in your tauti.conf.json for the window. This seems to fix the blank screen issue on start as well as page flicker on window resize. Also, if you use SSG framework like Next.js for frontend the static HTML will be loaded immediately into webview. The SPA framework triggering css from javascript might also flash colors for few millis on start. Hope this helps.

Answer 33 · 2024-05-12T20:12:52.000Z

A few days ago the package libwebkit2gtk-4.0-37 was updated to version 2.44.1-1. Since this update, no workaround is needed on my debian bookworm / Raspberry Pi OS. I removed the flag and no issue found. Thanks

Answer 34 · 2024-06-28T19:08:29.000Z

I experience the same issue on ubuntu 24.04 on tauri v2 project version 2.0.0-beta.22

Using export WEBKIT_DISABLE_COMPOSITING_MODE=1 fixed the issue but why does it happens?

Answer 35 · 2024-07-09T16:26:40.000Z

@thewh1teagle see my comment here. Tauri cannot do anything to fix this. Luckily, as @Angel-Gonzalez points out, the issue in WebKitGTK seems to be already resolved and we just need to wait for our distros to update though I also suspect that while updating, they might have been switched to Wayland or nvidia_drm.modeset might have been set for them, which could be the real reason it works for them now, would be very curious to confirm this.

The actual reason it works properly with WEBKIT_DISABLE_COMPOSITING_MODE=1, specifically is because, as I assume, it runs the WebKit engine in X11 mode, instead of Wayland, which is, at the moment, supported on more systems.

Answer 36 · 2024-07-13T19:53:18.000Z

@StarLederer the fix is in which release ?