[bug] Font size cannot be changed on NixOS + Wayland

[campbellcole]

Describe the bug

After scaffolding a new Vite + React + Tailwind project, I find myself unable to change the size of text at all, no matter the font or method used.

Reproduction

Followed the tutorial at https://tauri.app/v1/guides/getting-started/setup/vite to a T. I used the following nix flake for my dev shell + vscode:

{
  description = "";

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
    flake-utils.url = "github:numtide/flake-utils";
    rust-overlay.url = "github:oxalica/rust-overlay";
  };

  outputs = { self, nixpkgs, flake-utils, rust-overlay }:
    flake-utils.lib.eachDefaultSystem(system:
      let
        overlays = [ (import rust-overlay) ];
        pkgs = import nixpkgs {
          inherit system overlays;
        };
        libraries = with pkgs; [
          webkitgtk
          gtk3
          cairo
          gdk-pixbuf
          glib
          dbus
          openssl_3
          librsvg
        ];
        packages = with pkgs; [
          curl
          wget
          pkg-config
          dbus
          openssl_3
          glib
          gtk3
          libsoup
          webkitgtk
          librsvg
        ];
      in
      with pkgs;
      {
        devShells.default = pkgs.mkShell rec {
          buildInputs = [
            (rust-bin.stable.latest.default.override {
              extensions = [ "rust-src" ];
            })
            nodejs
            nodePackages.pnpm
          ] ++ packages;

          shellHook = ''
            export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libraries}:$LD_LIBRARY_PATH
          '';

          WEBKIT_DISABLE_COMPOSITING_MODE = 1;
          RUST_BACKTRACE = "full";
        };
      }
    );
}

Expected behavior

I expect to be able to change the font size.

Platform and versions

$ pnpm tauri info
[⚠] Environment
    - OS: NixOS 23.11.0 X64
    ✔ webkit2gtk-4.0: 2.40.3
    ✔ rsvg2: 2.55.1
    ✔ rustc: 1.70.0 (90c541806 2023-05-31)
    ✔ Cargo: 1.70.0 (ec8a8a0ca 2023-04-25)
    ⚠ rustup: not installed!
      If you have rust installed some other way, we recommend uninstalling it
      then use rustup instead. Visit https://rustup.rs/
    ⚠ Rust toolchain: couldn't be detected!
      Maybe you don't have rustup installed? if so, Visit https://rustup.rs/
    - node: 18.16.1
    - pnpm: 8.6.5
    - npm: 9.5.1

[-] Packages
    - tauri [RUST]: 1.4.1
    - tauri-build [RUST]: 1.4.0
    - wry [RUST]: 0.24.3
    - tao [RUST]: 0.16.2
    - @tauri-apps/api [NPM]: not installed!
    - @tauri-apps/cli [NPM]: 1.4.0

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../dist
    - devPath: http://localhost:5173/
    - framework: React
    - bundler: Vite

Stack trace

No response

Additional context

When the pnpm tauri dev command is run, the console message Could not determine the accessibility bus address. I do not know if this is the cause of the issue, but I did find a github issue relating to that message and I used the env var mentioned in that issue to no avail.

[campbellcole]

This issue is still present when generating a brand new project that doesn't even use tailwind:

I am fairly certain this is not what this page is supposed to look like. Every line of text is the exact same size and the stylesheets declare that should not be the case.

[campbellcole]

Ok so I have come up with a workaround for this. I tested the examples in this repo using the latest commit so tauri 2.0.0-alpha.10 and the problem still occurred. I figured this must be because of wayland so I looked around to see if there was a way to force the use of X11 through XWayland, and it turns out there is and that solved the issue.

The way to solve this problem is by setting GDK_BACKEND=x11. I did this in my nix flake:

{
  description = "";

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
    flake-utils.url = "github:numtide/flake-utils";
    rust-overlay.url = "github:oxalica/rust-overlay";
  };

  outputs = { self, nixpkgs, flake-utils, rust-overlay }:
    flake-utils.lib.eachDefaultSystem(system:
      let
        overlays = [ (import rust-overlay) ];
        pkgs = import nixpkgs {
          inherit system overlays;
        };
        common = with pkgs; [
          webkitgtk
          gtk3
          glib
          dbus
          openssl_3
          librsvg
        ];
        libraries = with pkgs; [
          cairo
          gdk-pixbuf
        ] ++ common;
        packages = with pkgs; [
          curl
          wget
          pkg-config
          libsoup
        ] ++ common;
      in
      with pkgs;
      {
        devShells.default = pkgs.mkShell rec {
          buildInputs = [
            (rust-bin.stable.latest.default.override {
              extensions = [ "rust-src" ];
            })
            nodejs
            nodePackages.pnpm
          ] ++ packages;

          LD_LIBRARY_PATH = pkgs.lib.makeLibraryPath libraries;

          WEBKIT_DISABLE_COMPOSITING_MODE = 1;
          GDK_BACKEND="x11";
          RUST_BACKTRACE = "full";
        };
      }
    );
}

It would still be nice to know why gdk doesn't work correctly on wayland, but I'm glad I figured this out.

[campbellcole]

Also just discovered, using this environment variable will cause severe flickering when the app is first opened, and every region on the webpage will need to be redrawn by hovering with the cursor.

I solved this by disabling the WEBKIT_DISABLE_COMPOSITING_MODE env var (i.e. unsetting it). In my previous tauri projects, this var was required to get the app to render at all, but now it seems to cause more problems than it solves and it isn't necessary in my case.

[phisch]

When compiling a basic tauri example with my system libraries, the app works fine, even scaling works. But when I use the flake.nix provided in the documentation, the resulting client seems to have scaling issues and everything in it is very small.

When compiling this example through the officially documented flake.nix:

Compiling the same project with my systems libraries:

Any idea what could cause this?

Also, forcing xwayland as a backend is not an option.

[donovanglover]

I'm also interested in this. Setting GDK_BACKEND=x11 causes the window to flicker when resizing in Hyprland, so a fix for Wayland would be nice.

[Mange]

I too had this problem. Would you mind posting the file that worked for you?

[n3oney]

This seems to be an issue with webkit2gtk, as I can reproduce it without using Tauri. Just a simple GTK3 + webkit2gtk Rust app that loads a page, and everything related to font sizes is very broken. It actually won't render any buttons for example, unless I manually set the font-size on them, and the body's font-size is set to like 4.5px for some reason.

I've decided to try copying all the dependencies from this derivation https://github.com/NixOS/nixpkgs/blob/1f64c9ca16c089e28df3cddc9ba795dd2016fcbf/pkgs/desktops/gnome/core/epiphany/default.nix since it seems to work fine and also uses webkitgtk 4.1, but even with that, it's still broken, both in debug and release mode.

Something that I've noticed though, is when you write a derivation for the package, and run it with Nix, it works just fine! Issue magically disappears. Unfortunately this obviously isn't well suited for dev mode.

[n3oney]

Good news, I've solved the issue! Try adding

          shellHook = ''
            export XDG_DATA_DIRS="${pkgs.gsettings-desktop-schemas}/share/gsettings-schemas/gsettings-desktop-schemas-45.0"
          '';

to your devShell.

[Mange]

I think this is more general:

    shellHook = with pkgs; ''
      export XDG_DATA_DIRS=${gsettings-desktop-schemas}/share/gsettings-schemas/${gsettings-desktop-schemas.name}:${gtk3}/share/gsettings-schemas/${gtk3.name}:$XDG_DATA_DIRS;
      export GIO_MODULE_DIR="${pkgs.glib-networking}/lib/gio/modules/";
    '';

[ralpheichelberger]

Good news, I've solved the issue! Try adding

          shellHook = ''
            export XDG_DATA_DIRS="${pkgs.gsettings-desktop-schemas}/share/gsettings-schemas/gsettings-desktop-schemas-45.0"
          '';

to your devShell.

Thank you sooo much for your post! This makes my app work perfectly again! For context and if someone else wants to run a Tauri app using Cage like I do, this is my configuration (also using wlr-randr to rotate the screen upright after "-r" option on Cage has been removed with the new version): services.cage = { enable = true; user = "kassa"; program = "${pkgs.writeScriptBin "start-cage-app" ''

!/usr/bin/env bash

  export XDG_DATA_DIRS="${pkgs.gsettings-desktop-schemas}/share/gsettings-schemas/gsettings-desktop-schemas-45.0"
  wlr-randr --output HDMI-A-1 --transform 270
  exec ${(pkgs.callPackage ./register-tauri { })}/bin/register
''}/bin/start-cage-app";

};

[andrewbaxter]

So here's the broken values:

XDG_DATA_DIRS=/nix/store/22fla1y46210imn2zhqpp135baq675ka-desktops/share:/home/rootui/.nix-profile/share:/nix/profile/share:/home/rootui/.local/state/nix/profile/share:/etc/profiles/per-user/rootui/share:/nix/var/nix/profiles/default/share:/run/current-system/sw/share
GIO_MODULE_DIR unset

and the fixed ones per the above suggestions

XDG_DATA_DIRS=/nix/store/6ywqswdc2q57mhysnh3jp6dcbxd62yz4-gsettings-desktop-schemas-45.0/share/gsettings-schemas/gsettings-desktop-schemas-45.0:/nix/store/8d431fhwmpfmf9rnpslx8pn98l151wq9-gtk+3-3.24.41/share/gsettings-schemas/gtk+3-3.24.41:/nix/store/22fla1y46210imn2zhqpp135baq675ka-desktops/share:/home/rootui/.nix-profile/share:/nix/profile/share:/home/rootui/.local/state/nix/profile/share:/etc/profiles/per-user/rootui/share:/nix/var/nix/profiles/default/share:/run/current-system/sw/share
GIO_MODULE_DIR=/nix/store/xrp3b987wmblhv444xk7aa6v24rgq6am-glib-networking-2.78.0/lib/gio/modules/

[hardyjosh]

@andrewbaxter @Mange we have this setup in our flake.nix, which seems to work fine for dev, but when I build the app and attempt to run it on Ubuntu I get

TLS/SSL support not available; install glib-networking

is this working for all of you in the built version?

[Mange]

is this working for all of you in the built version?

I only ship release builds for Windows so I have not tried. But I believe things should be working for me.

[lavafroth]

KDE plasma 6.2 users, please refrain from adding ${gtk3}/share/gsettings-schemas/${gtk3.name} to the XDG_DATA_DIRS environment variable as it causes flickers during render.