Partly blurry UI

Since some updates the Handlers-Windows draws blurry text and icons. The strange thing is it doesn't seem to effect the whole area of the window. Look at the plus icon at the top and then the one on the bottom.

I may be alone here but I am not able to visibly tell a difference. Loaded up my Radzen application as well and am not noticing an issue.

Left: How it should be (and is, at the top of my first screenshot)
Right: How it looks on parts of the Interface (bottom of my first screenshot)

@Damian Are you running your Windows with some sort of scaling?
On which resolution are you?

No special scaling. I tested on both my 4K monitor and my other 2 1920x1200 (yeah idk why 1200 but they are) monitors.

1920x1200 (16:10) is the "Computer-Monitor" Version of FullHD, 1920x1080 (16:9) is the "Television" Version of FullHD.

You are running a 4K monitor on Windows, without scaling? Are you kidding me?
Do your windows-settings look like this?

Oops, forgot to put that part. No special scaling on the FullHD monitors* (thanks btw, did not know that), the 4k monitor is at 250%.

Thought so :laughing:
100% scaling on 4k is reeeeeally small, you need a beamer and a really big wall to see something.

Anyway, if you enabled scaling every part of your screen isn't rendered 'native' anymore, so you cannot tell if there is anything drawn wrong.

That's probably caused by upgrading to Electron 7. For a reference here is how this looks on my 5k iMAC

The code is bolder than it used to be (that is the default rendering of the <code> element by the way).
I've experimented with the font anti aliasing settings but every other option seems worse.

We will still investigate if there is anything we can do.

I have to admit this stuff gets harder to see on higher resolutions. I am working on a 2k monitor here.

Macs start scaling by default on lower resolutions than PCs as far as I know.

I just compared the icons from your screenshot in and they are the same, pixel-perfect.
Maybe it's a Windows thing.

It's probably not a Windows thing but Electron/Chrome thing. I am firing up a few Windows VMs to compare.

If you want to experiment you can try Radzen 2.42.10 which is the last version that uses the older Electron. If things look better we know what to blame.

I just tested it a little bit more and found out the list of items in the handler window is nice and sharp, until the scrollbar is rendered.

  • Create new empty entries in the window until the scrollbar is rendered. Everything is still fine.
  • Close the window and reopen it. Now it is blurry.
  • If you now delete entries until the scrollbar disappears, the blurryness will vanish.

And yes, I can confirm:
Radzen 2.42.10 -> No issue
Radzen 2.43.2 -> Blurry stuff

I will change two of the fonts in the next release as it seems to improve things a bit

I do not think replacing fonts will make anything better, the icons for an example react in the same way.
But it could have something to do with hardware-acceleration. Is it possible to disable it somewhere?

EDIT: and you cannot improve it 'a bit', if the rendering changes half-way it is broken, making it less obvious isn't going to solve it, it's a font, fonts are made to render in a consistent pixel-perfect way.

I do not think replacing fonts will make anything better, the icons for an example react in the same way.

Why do you think so? My tests show that changing the icon font from woff to ttf improves the appearance quite a bit.

it's a font, fonts are made to render in a consistent pixel-perfect way.

You say it as a fact which isn't true :slight_smile: Again the only thing we have changed between versions is the Electron version. It obviously changed the font rendering.

1 Like

I am sorry, maybe I am mixing up some stuff here. Are we talking about the different font-rendering in the whole application or changes of the font-rendering depending on the scrollbar which pops up as seen in my posted animated gif?

I am attaching three screenshots. Radzen 2.42.10, 2.43.3 and current master version (not released). I've made a few tweaks in the latter which should improve the legibility of the text and the shape of the icons.

1 Like

I tested both issues in 2.43.8

  • Blurry UI in handler-window: still reproducible
  • Text-rendering in the whole: looks much better

Unfortunately we cannot reproduce the Blurry UI issue. I suggest you check your global ClearType settings and adjust them if needed.