Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] Blank screen on starting tauri application #5143

Open
yang282441848 opened this issue Sep 6, 2022 · 37 comments
Open

[bug] Blank screen on starting tauri application #5143

yang282441848 opened this issue Sep 6, 2022 · 37 comments
Labels
platform: Linux status: upstream This issue is blocked by upstream dependencies and we need to wait or contribute upstream fixes type: bug

Comments

@yang282441848
Copy link

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.
    Screenshot from 2022-09-06 16-15-26
  2. When I drage these elements, It shows below.
    Screenshot from 2022-09-06 16-14-41
  3. Http server works well.
    Screenshot from 2022-09-06 16-17-04
  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

@yang282441848 yang282441848 added status: needs triage This issue needs to triage, applied to new issues type: bug labels Sep 6, 2022
@FabianLars
Copy link
Member

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
Copy link
Author

yang282441848 commented Sep 6, 2022

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
Copy link
Member

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
Copy link
Author

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
Copy link
Author

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

@yang282441848
Copy link
Author

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
Copy link

fzdwx commented Sep 12, 2022

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

image

@Pyrodash
Copy link

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).
Screen Shot 2022-10-13 at 12 16 31 PM
Screen Shot 2022-10-13 at 12 16 41 PM

@StarLederer
Copy link

StarLederer commented Oct 19, 2022

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

@StarLederer
Copy link

StarLederer commented Oct 19, 2022

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
Copy link

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.

@FabianLars FabianLars added status: upstream This issue is blocked by upstream dependencies and we need to wait or contribute upstream fixes and removed status: needs triage This issue needs to triage, applied to new issues labels Nov 11, 2022
@Elanis
Copy link

Elanis commented Jan 6, 2023

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

@pospi
Copy link

pospi commented Jan 31, 2023

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

@yang282441848
Copy link
Author

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

It works, thx.

@pospi
Copy link

pospi commented Feb 3, 2023

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
Copy link
Author

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
Copy link

brcha commented May 25, 2023

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
Copy link
Author

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
1

but normal in the chromium browser.

2

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.

@deron-dev
Copy link

deron-dev commented Dec 30, 2023

replying to

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

image

image

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
Copy link

helloimalemur commented Jan 26, 2024

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
Copy link

This application is still in dev

@StarLederer
Copy link

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
Copy link

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
Copy link

helloimalemur commented Mar 3, 2024

@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
Copy link

xiaguangbo commented Apr 28, 2024

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
Copy link

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
Copy link

niraj-khatiwada commented May 12, 2024

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
Copy link

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
Copy link
Contributor

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
Copy link

@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
Copy link

@StarLederer the fix is in which release ?

@InAnYan
Copy link

InAnYan commented Oct 12, 2024

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 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
platform: Linux status: upstream This issue is blocked by upstream dependencies and we need to wait or contribute upstream fixes type: bug
Projects
Status: 📬Proposal
Development

No branches or pull requests