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
December 14, 2024, 10:07am
2
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
December 24, 2024, 12:41pm
3
I just managed to solve this issue, thanks to some help over on GitHub:
opened 01:53PM - 22 Dec 24 UTC
closed 12:36PM - 24 Dec 24 UTC
0.kind: bug
## Describe the bug
When using `webkitgtk_4_1` rendering seems to be broken i… n some way:
![image](https://github.com/user-attachments/assets/cadf84c1-7b10-41ed-a8d1-18d5554f75b1)
(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:
```py
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](https://tauri.app/) project and seeing what the demo pages looks like in comparison to what it should or try running [igneous-md](https://github.com/DOD-101/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
<!--
Please @ people who are in the `meta.maintainers` list of the offending package or module.
If in doubt, check `git blame` for whoever last touched something.
-->
@NixOS/gnome, @dasj19, @bobby285271
---
Note for maintainers: Please tag this issue in your PR.
---
Add a :+1: [reaction] to [issues you find important].
[reaction]: https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/
[issues you find important]: https://github.com/NixOS/nixpkgs/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc
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 ];
}
2 Likes