search

emilk / egui

egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
https://www.egui.rs/
Apache License 2.0
22.04k stars 1.59k forks source link

Blurry font rendering in firefox on linux #4241

Closed mash-graz closed 6 months ago

mash-graz commented 6 months ago

Although some older similar issue reports exist, I want to document the egui Web rendering differences on firefox vs. chromium on my debian linux gnome wayland machine.

The differences are rather subtle and hard to grasp, but they make it very uncomfortable to work with text in egui in browser based applications.

I attach a view example screenshots:

chromium chromium2 firefox firefox2 side-by-side

lnicola commented 6 months ago

Same for me, if not worse:

image

Bad gamma, maybe?

CryZe commented 6 months ago

@lnicola That's how it's supposed to look. It's just that the default text color is grey, not black and that the text hinting is not particularly great (if it even exists).

emilk commented 6 months ago

The problem is that egui's pixel grid is not aligned with the pixel grid of the display:

Firefox:

Screenshot 2024-03-27 at 15 31 18

In Chromium it is better, but it is still wrong vertically:

Screenshot 2024-03-27 at 15 32 13

(these are blow-ups of your screenshots).

Is suspect we can fix it by tweaking how the canvas element is aligned in its parent somewhere in https://github.com/emilk/egui/blob/a15e6c21220e593932569558a31de9403e3791d0/crates/eframe/src/web/mod.rs#L127-L130

mash-graz commented 6 months ago

Thanks for your inspection and expert judgment.

It's such a crazy issue. One on hand it's so subtle and subliminal that you don't want to write an issue report or similar complaint about it, but on the other hand it's really annoying and disturbing any practical use of text in egui web applications.

Would it be possible to somehow automatize the job, which you did here manually -- i.e. analyzing a screen grab of an interference pattern seen through the browsers view and figure out the best fitting correction parameters for the particular setup? A kind of self optimization.

This could be a rather user-friendly workaround to overcome the hardly manageable varieties of this issue. It may change with any new browser release again and the complex side effects of different scaling mechanisms for HiDPI displays may also become an ever-growing source of troubles.

emilk commented 6 months ago

Tim on Discord linked to this relevant article: https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

emilk commented 6 months ago

I can reproduce this on chromium on my Mac now, so I'm taking a look

emilk commented 6 months ago

It looks like it is the rounding-to-even added in https://github.com/emilk/egui/pull/151 that is causing the problem. Removing that makes the rendering pixel-perfect on Firefox and Chromium (on my Mac), but Safari is still blurry on most zoom levels.

Desktop Safari seems like a lost cause right now. Luckily it's not very popular.

emilk commented 6 months ago

Please help test if https://github.com/emilk/egui/pull/4299 fixes your problem!