tauri: [bug] Blank screen on starting tauri application

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

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 9
  • Comments: 30 (2 by maintainers)

Most upvoted comments

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.

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.

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?

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.

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

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

image