webkitgtk_4_1: incorrect rendering

[DOD-101]

Describe the bug

When using webkitgtk_4_1 rendering seems to be broken in some way:

(webview on the left and Firefox on the right)

This applies to a number of different things, from fonts being the wrong size to the checkboxes not even appearing in the webview.

I first encountered this in some rust code, but have been able to reproduce the same result in python.

Steps To Reproduce

Steps to reproduce the behavior:

1. Create the following script:

import webview

webview.create_window("Hello world", "http://localhost:2323/")
webview.start()

2. Load anything on localhost.

3. Make sure you have the required dependencies (some of these might not be needed):
   nix-shell --command zsh -p gtk3 python312Packages.pygobject3 python312Packages.pywebview python312 python312Packages.typing-extensions webkitgtk_4_1

4. Run python main.py

Expected behavior

The result in webview should be rendered properly, similar to how firefox displays it. This is what happens on other distros, which is why I think the issue might have to do with nix/NixOS.

Screenshots

Additional context

I have encountered this issue on both my nix machines and not any other machines.

I don't have this issue on Arch Linux, and I also know this doesn't happen on Fedora.

Also see this post on the NixOS discourse: https://discourse.nixos.org/t/tauri-dev-build-not-rendering-correct/57136

If you want a more fleshed out example, you can try out either creating a fresh tauri project and seeing what the demo pages looks like in comparison to what it should or try running igneous-md.

Metadata

 - system: `"x86_64-linux"`
 - host os: `Linux 6.6.63, NixOS, 25.05 (Warbler), 25.05.20241209.a73246e`
 - multi-user?: `yes`
 - sandbox: `yes`
 - version: `nix-env (Nix) 2.24.10`
 - nixpkgs: `/nix/store/yw6kg4rb9v8s3ypjbpspig5r81m4lr5s-source`

Notify maintainers

@NixOS/gnome, @dasj19, @bobby285271

---

Note for maintainers: Please tag this issue in your PR.

---

Add a 👍 reaction to issues you find important.

[jtojnar]

The stylesheet looks like it comes from GitHub, maybe you are missing glib-networking, which is required for TLS support. See also GIO modules section of the Nixpkgs manual.

[DOD-101]

Thank you so much.

All I needed to do was to use wrapGAppsHook4.

[nixos-discourse]

This issue has been mentioned on NixOS Discourse. There might be relevant details there:

https://discourse.nixos.org/t/tauri-dev-build-not-rendering-correct/57136/3

[dev-sfuentes]

Sorry to bother, could you provide an example of a shell.nix for Tauri? I have the same issue like the discourse.nixos.org post where images and icons are not displayed, and tried adding glib-networking and wrapGAppsHook4, but probably I am not using it correctly. Also added rustc because is needed even though the Tauri prerrequisites doesn't indicate that

Here is my shell.nix

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

      wrapGAppsHook4
    ];

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

      rustc
      glib-networking
    ];
}

[elisaado]

I can confirm that this still seems to be an issue