[Web Demo] Blurry rendering when browser window has odd width / height

[daniel5151]

Consider this side-by-side comparison of the basic demo pane:

The left screenshot was taken in a browser window with dimensions 1000px x 1200px, while the one on the right was taken in a browser window with dimensions 1001px x 1200px. i.e: a difference of one pixel resulted in the entire image becoming significantly blurrier.

A similar issue occurs when the window's height is odd, albeit to a lesser extent.

Tested in Google Chrome Version 87.0.4280.88 on Ubuntu 20.10 with NVIDIA Drivers

[emilk]

Good find - I can reproduce in Firefox on Mac too. Maybe a simple fix is to just round down the canvas size to the nearest multiple-of-2.

[emilk]

I was gonna fix this now, but can no longer reproduce it. Weird :/

[bugadani]

I can :)

MS Edge, version 87.0.664.75

[emilk]

Anyone want to take a stab at this? I can't reproduce on my machine, so I can't.

I'm guessing we need to add some rounding in https://github.com/emilk/egui/blob/master/egui_web/src/lib.rs#L117:L141

My theory is that we need to round (or rather floor) the height and width to the next factor-of-2 in pixel or in point size. Or maybe just round to the nearest integers.

[bugadani]

Well for me (at least on firefox, which I don't use, LOL) was to turn off webgl antialiasing in about:config. The option is not available in Edge (chromium) though, so this is only food for thought. Also, my head hurts from staring at blurry text :)

I'm suspecting this issue is only present on non-high DPI only.

On

Off

[crumblingstatue]

I can reproduce this on chromium 88, and I can confirm it only happens on odd width/height. Unfortunately the height is odd when my browser is maximized. If anyone wants me to test something, let me know.

[aakamenov]

I've submitted a PR for this - #149 . Managed to reproduce and fix on Edge and Opera (both Chromium), but should be fixed on other browsers. If anyone was getting this on Firefox or Chrome, would be nice to confirm that it doesn't occur anymore.