font size broken

[tame dew]

with the following svelte component:

<article>
    <header>
        <h1>Modpack Title</h1>
    </header>
</article>

<style>
article {
    background: var(--primary-bg);
}

h1 {
   font-size: 2.5rem; 
}
</style>
``` I would expect the font for the `h1` to be bigger, however, I have the following result:

it works fine on firefox

[last saddle]

it works fine on firefox
Can you try it in edge too?

or any chromium browser

[tame dew]

on linux rn

will open on chromium

yep runs fine on chromium

[last saddle]

wait, then nevermind. i thought that screenshot was windows

can you try epiphany / gnome web then

a browser using webkitgtk

[tame dew]

the wonders of nix

[last saddle]

if it behaves the same then it could also be a problem on macos

[tame dew]

the downside of nix: this takes forever

works here to

@last saddle it's quite weird how it works on webkit browsers but not tauri, despite tauri being on webkitgtk

[last saddle]

maybe it's the webkitgtk version being different or epiphany switched to gtk4 iirc

[tame dew]

I'm currently using nixos's webkitgtk package

[last saddle]

that said, i use rem units in my app too without problems but maybeee i set a base size myself in a parent element which it picks up idk

[tame dew]

px units also do nothing

[last saddle]

huh

then i have no idea what's going on rn

[tame dew]

wack

I guess I'll have to work on the UI in firefox

[lament sage]

Try use styles under HTML

They must to be in head

[tame dew]

Vite/svelte puts styles in head already

[tame dew]

if I update the styles directly in the debugger, it also fails

[manic sigil]

Do you have a minimum reproduction you can share? I couldn't reproduce this behaviour with the bootstrapped Svelte project in Tauri and webkit2gtk-4.1: 2.38.6 (mentioning because I noticed your "force dark mode" icon is different to mine).
src/App.svelte:

<script lang="ts">import Greet from './lib/Greet.svelte'</script>

<main class="container">
  <h1>h1 in App.svelte</h1>
  <h2>h2 in App.svelte</h2>
  <div class="row"><Greet /></div>
</main>

src/lib/Greet.svelte:

<article>
    <header>
        <h1>h1 in Greet.svelte</h1>
        <h2>h2 in Greet.svelte</h2>
    </header>
</article>

<style>
article { background: var(--primary-bg); }
h1 { font-size: 2.5rem; }
</style>

[tame dew]

Hmm, I'm using webkitgtk from nixpkgs

Which is on 2.40.2

[tame dew]

https://github.com/glowsquid-launcher/glowsquid/ its not super minimal but the frontend is only 3 files

(I just started on a rewrite of this project so I'm starting fresh)

[manic sigil]

webkit2gtk 2.40.2 still uses GTK3 (https://webkitgtk.org/reference/webkit2gtk/2.40.2/) so I don't think it's that.
The first screenshot uses webkit2gtk-4.0: 2.38.6 on Linux Mint 21.1 which is derived from Ubuntu 22.04.
The second screenshot uses webkit2gtk-4.0: 2.40.2 on NixOS 23.5.0 in a fresh VM after running nix-shell -p rustup, nix-shell -p nodejs_18, npm install, nix develop --extra-experimental-features nix-command --extra-experimental-features flakes and npm run tauri dev.

Do you have a monitor with high DPI? That's caused problems before but usually only on Windows, if I remember correctly.

[tame dew]

nope

[tame dew]

what the hell is going on with my webkit 💀

amma gc and check

btw, thanks for spending the time to check on a nixos vm. I actually appreciate that

so the tl;dr is its a me issue

I got 20% of my disk back lol

[tame dew]

wait is this on wayland or X11?

using Xwayland leads to some, weird results

sizing works on x11

but not colours

colours work on wayland

but not sizing

goofy

oh wait x11 now works flawlessly

welp guess I'm using that for dev in the mean time

its a wayland issue I thikn

[tame dew]

now its working on wayland