[bug] Blank screen on starting tauri application

[yang282441848]

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

1. 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.
2. When I drage these elements, It shows below.
3. Http server works well.
4. I tried to run cargo build and cargo build --release, but it seems nothing changed.

Reproduction

1. 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

[FabianLars]

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?

[yang282441848]

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.

[FabianLars]

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 🤔

[yang282441848]

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

[yang282441848]

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

[yang282441848]

I found something more.

1. Run src-tauri/target/debug/${app} directly, only the debug mode will try to connect with http server obviously.
2. Text Could not connect: Connection refused shows.
3. Run npm run dev to start a http server. App still shows a blank screen, though all resources loaded.
4. Stop npm http server and application.
5. 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.
6. Create a new index.html with <head><head><body>Hello</body> and restart the debug-app, it works too.

[fzdwx]

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

[Pyrodash]

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).

[StarLederer]

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).

[StarLederer]

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

[StarLederer]

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.

[Elanis]

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

[pospi]

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

[yang282441848]

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

It works, thx.

[pospi]

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?

[yang282441848]

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.

[brcha]

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.

[yang282441848]

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.

[Tormak9970]

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

[planetoryd]

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.

[KaniuBillows]

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.

[D3vil0p3r]

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.

[Oliver-Piorun]

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.

[deron-dev]

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!

[helloimalemur]

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

[D3vil0p3r]

This application is still in dev

[StarLederer]

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?

[MeowRosya]

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

[helloimalemur]

@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

[xiaguangbo]

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

[Angel-Gonzalez]

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

[niraj-khatiwada]

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.

[Angel-Gonzalez]

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

[thewh1teagle]

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?

[StarLederer]

@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.

[AkechiShiro]

@StarLederer the fix is in which release ?