[bug] Using px in my css results in different sizes

[tinmarr]

Describe the bug

Using pixel values in CSS gives different sizing in the Tauri webview vs. Chromium-based browser (Brave in my case).

(left is Brave, right is Tauri)

Here is the source code:

<button style="border: 16px solid black; padding: 16px;">test</button>

styles.css

:root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    color: #0f0f0f;
    background-color: #f6f6f6;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

(loaded through Vue.js)

Using rem or % works as intended, however this can't be a work around because many CSS libraries using hard coded px. (Bootstrap, Tailwind, etc)

Reproduction

No response

Expected behavior

No response

Platform and versions

yarn run v1.22.19
$ tauri info

[✔] Environment
    - OS: Arch Linux Rolling Release X64
    ✔ webkit2gtk-4.0: 2.40.5
    ✔ rsvg2: 2.56.3
    ✔ rustc: 1.72.0 (5680fa18f 2023-08-23)
    ✔ Cargo: 1.72.0 (103a7ff2e 2023-08-15)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (default)
    - node: 18.16.0
    - yarn: 1.22.19
    - npm: 9.8.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]: 1.4.0
    - @tauri-apps/cli [NPM]: 1.4.0

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../dist
    - devPath: http://localhost:1420/
    - framework: Vue.js
    - bundler: Vite
Done in 3.92s.

Stack trace

No response

Additional context

No response

[FabianLars]

Thanks for the report, could you also test this in epiphany (also known as "gnome web")? It's a browser using webkitgtk which we use for tauri's webview on Linux.

Also, did you try a css reset? Would be a bit weird if it also affects px values but just to be sure.

[tinmarr]

Looks like this is a webkitgtk problem... Maybe even a config issue on my end. Any ideas on your end?

(closing cuz this is clearly not a Tauri issue)