Tauri dev build not rendering correct

[permafrozen]

Hello, I simply followed the prerequisites on the tauri website: Prerequisites | Tauri and after using the create-tauri-app, than using npm install and npm run tauri dev, the app is not being displayed correctly native. Everything works fine in the web browser.

nix-shell:

let pkgs = import <nixpkgs> { };
in pkgs.mkShell {
  nativeBuildInputs = with pkgs; [
    pkg-config
    gobject-introspection
    xorg.libXtst
    rustc
    cargo
    cargo-tauri
    nodejs
  ];

  buildInputs = with pkgs; [
    at-spi2-atk
    atkmm
    cairo
    gdk-pixbuf
    glib
    gtk3
    harfbuzz
    librsvg
    libsoup_3
    pango
    webkitgtk_4_1
    openssl
  ];

  shellHook = ''
    export WEBKIT_DISABLE_DMABUF_RENDERER="1"
  '';
}

Native:

Browser:

I also tried some different options and created new projects, but it always ends up like this. If you know why this happens please explain it to me, thanks.

[DOD-101]

I have been running to the same issue for a few weeks now.

It seems to be an issue related to webkitgtk_4_1 in some way, since it also occurs on projects where I use webkitgtk without tauri.

[DOD-101]

I just managed to solve this issue, thanks to some help over on GitHub:

webkitgtk_4_1: incorrect rendering

This is my the shell.nix:

{
  pkgs ? import <nixpkgs> { },
}:
let
  pkg = pkgs.rustPlatform.buildRustPackage {
    pname = "igneous-md";
    version = "e38824d29d65f0ad1146d01cb94d24f3cd648541";

    cargoLock.lockFile = ./Cargo.lock;
    doCheck = false;

    buildInputs = with pkgs; [
      openssl
      pkg-config
      webkitgtk_4_1
      noto-fonts-color-emoji
      glib-networking
    ];

    nativeBuildInputs = with pkgs; [
      openssl
      pkg-config
      webkitgtk_4_1
      noto-fonts-color-emoji

      wrapGAppsHook4
    ];

    src = ./.;
  };
in
pkgs.mkShell {
  packages = [ pkg ];
}