[bug] Blank screen on starting tauri application

yang282441848 commented 2 years ago

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

Create Tauri app with pnpm create tauri-app, selecting vite+vue scaffolding.
In ${MyAppDir}, run pnpm run install;
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

yang282441848 commented 2 years ago

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.

fzdwx commented 2 years ago

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

Pyrodash commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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

pospi commented 1 year ago

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

yang282441848 commented 1 year ago

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

It works, thx.

pospi commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

ple1n commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 10 months ago

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 commented 10 months ago

This application is still in dev

StarLederer commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

@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 commented 7 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

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 commented 4 months ago

@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 commented 4 months ago

@StarLederer the fix is in which release ?

InAnYan commented 1 month ago

I'm having this issue. Setting the WEBKIT_DISABLE_COMPOSITING_MODE to 1 doesn't help.

UPDATE: switched driver to nouveau, still doesn't work.

Linux ruslanpc 6.8.0-41-generic #41-Ubuntu SMP PREEMPT_DYNAMIC Fri Aug  2 20:41:06 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

OS: Linux Mint 22 x86_64 
Host: 82K2 IdeaPad Gaming 3 15ACH6 
Kernel: 6.8.0-41-generic 

Resolution: 1920x1080 

DE: Xfce 4.18 
WM: Xfwm4 
WM Theme: Mint-X

AMD Ryzen 5 5600H with Radeon Graphics (12) @ 4.280GHz 

AMD ATI Radeon Vega Series / Radeon Vega Mobile Series 
NVIDIA GeForce GTX 1650 Mobile / Max-Q

tauri-apps / tauri