[BUG] Windows get blurry after moving them

[gsterling]

Describe the bug When moving ItemPiles windows, they get blurry, which gives (at least) me a slight headache, since my eyes try to focus the window, which they can't.

To Reproduce Steps to reproduce the behavior:

1. Open an item pile
2. See it being sharp
3. Wiggle the window around a bit (this also lags a little bit, but it's not really distracting)
4. See the window now being blurry

Expected behavior The window should always look as sharp as when it was first opened.

Screenshots Sharp:

Blurry:

Setup:

• Foundry Version: 10.288
• System Version: Splittermond 0.9.7
• Item Piles Version: 2.2.10
• Browser & version: Chromium 106.0.5249.119

Active modules:

• Item Piles
• libwrapper
• socketlib

(I disabled all other modules)

[Solidor777]

Out of curiosity,

1. Does this occur with Firefox?
2. Do you have a browser zoom level other than 100%?
3. What OS are you running?
4. What is the resolution of your monitor?

[gsterling]

Out of curiosity,

1. Does this occur with Firefox?

No. But performance-wise regarding foundry firefox is not a good alternative, although it's my daily driver.

2. Do you have a browser zoom level other than 100%?

I did! And I haven't noticed, because it was only 110%. This makes the problem better, but it's still there, although I likely wouldn't have noticed it.

3. What OS are you running?

Arch Linux with Wayland as a compositor.

4. What is the resolution of your monitor?

4k, but I also tried with 1080p on the same monitor.

[typhonrt]

Hi @gsterling. I'm the developer of the underlying UI library that Item Piles uses. This is an uncommon problem reported, but you are the 2nd to have a reproducible set of hardware. The other case is reported on Windows 11, but also Chrome browser. Quite likely this is an issue w/ the Chrome rendering engine / compositor in particular that is misbehaving; IE you don't see the issue in Firefox.

The underlying UI library uses standard CSS / JS, but uses optimized rendering by using transform: matrix3d(...) for UI window movement. This promotes the app / UI window element to being hardware accelerated and likely a combination between your monitor resolution and possibly various OS / browser scaling settings causes the Chrome renderer / compositor to misbehave.

Can you tell me your monitor make / model / resolution? The other reporter has a QHD monitor at 2560x1440.

I'm trying to collect as much information about system specs for those affected by this external / browser issue to report data to the Chromium / Chrome bug tracker. Chrome while very good has had blurry text issues for many years. You can see that there are many bugs / regressions in the Chromium but tracker around the keyword blurry: https://bugs.chromium.org/p/chromium/issues/list?q=blurry&can=2

Next week I'm going to put together some isolated test cases that you can try out so that I can submit the system specifications + a minimal test case to the Chromium dev team, so that this data can be triaged and either added to an existing bug or file a new bug / issue w/ Chrome.

Thanks for helping. It's good that you have a different OS than Windows, so that possibly removes OS scaling aspects from the likely culprits, but other aspects such as monitor resolution could be correlated. My assumption is that this is an issue internally to the Chrome rendering engine.

[gsterling]

Can you tell me your monitor make / model / resolution? The other reporter has a UHD monitor at 2560x1440.

Samsung UHD Monitor U28E590DSL at 3840x2160, but this also happens when running the monitor at 1920x1080. Connected with displayport.

I am using a Sapphire RX 590 Nitro+ Special Edition Radeon RX 590 8 GB GDDR5 with the latest amdgpu driver for Arch Linux.

Next week I'm going to put together some isolated test cases that you can try out so that I can submit the system specifications + a minimal test case to the Chromium dev team, so that this data can be triaged and either added to an existing bug or file a new bug / issue w/ Chrome.

Yes, send anything you want me to test.

Thanks for helping. It's good that you have a different OS than Windows

I think so, too :laughing:

[typhonrt]

@gsterling The monitor resolutions are different so QHD & UHD so not a direct correlation there. I'll be following up with you next week once I get some isolated test cases together. Probably as late as mid-next week.

Thanks for taking the time to respond. I run a tight ship in code quality and this is the only external issue affecting my UI library right now. There is a thread on my Discord server where we are discussing this issue and it seems like you might be technically savvy. It could be easier to chat there if that makes sense for you: https://discord.gg/mnbgN8f Under the Development -> #typhonjs-runtime -> DPI scaling issues - Chrome thread.

[typhonrt]

Hi @gsterling... I have the first basic testcase created. I am using the Svelte REPL. My UI library does use Svelte, but it's the CSS / styles used w/ the browser that is causing Chrome to freak out. If you drag the mock app window does the text get blurry in the content areas? There is more things to potentially setup for testing and this is a basic test right now, but good to test if it gets blurry now.

https://svelte.dev/repl/2f8ab0453ee34e52bff869e7c9d769d8?version=3.52.0

I'm going to have to come back to this testing effort next week, but at least there is an initial test above to try out for now and report back. Thanks for your help.

[gsterling]

It is only noticable with 110% zoom. It looks better in your test app than it does in foundry. I assume it's because of the font used. Can you change it to a serif font?

Default (110%):

Moved:

Moved to a spot where it looks a little bit less blurry:

So it heavily depends on where the window is positioned.

For comparison, a moved window with 100% zoom:

BTW: Chromium uses around 100% CPU equivilant of a single core (spread across 3 cores), when moving the windows.

[typhonrt]

@gsterling Apologies about the errors.. I was updating the demo to add the z-index test / value. So we are definitely onto something as this is a very basic test case. Let me change a few more things. I added a new checkbox 'Enable will-change transform'. This will turn on and off the parameter that could be causing the issue w/ Chrome. I also made the text bold and serif font. If the blurry text appears without hitting any of those checkboxes on refresh / fresh load that is very good information to have.

Regarding the window moving / CPU usage; I'm not really throttling any of the updates / mouse dragging and this is a basic test case. I wouldn't worry right now if that seems off.. On my setup CPU usage goes from 5% to ~9-10% then drops back down when dragging is stopped.

The text in this test case doesn't get blurry for me and I can change the browser scaling to any value / super zoomed in and the text doesn't get blurry with any of the options selected (z-index / will-change).

[gsterling]

It does look really promising. Using serif didn't really increase the blurriness. I think my foundry system just uses a really weird font making it more noticable.

110% zoom. Reloaded site. No options ticked: Ticked one of the boxes, no reload:

Wobbled the right image:

Unchecking the box, again without a reload and it's instantly sharp again:

When enabling z-index I THINK it's a little blurrier, but am not really sure.

110%, reloaded, z-index, right one wobbled:

Enabled 'will-change-transform', no reload:

'will-change-transform' ist definetely the culprit.

(The more I look at it the harder it's to pinpoint exactly whats wrong or if I am imagining things)

[typhonrt]

@gsterling One more sanity check... I changed things around so that only the window initially on the right is affected by the will-change setting.

So these symptoms do seem like this bug in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1343711

Particularly the explanation in comment #4 seems to describe the symptom observed: https://bugs.chromium.org/p/chromium/issues/detail?id=1343711#c4

Good news is that will-change can be dropped. It's just an optimization to tell the browser that transform changes a lot; the browser does promote eventually to the optimized path. Totally weird that this affects a small amount of users with particular setups.

Perhaps give the demo another try as it will be easier to see the difference between the will-change affected window.

Interestingly enough I can even detect now a subtle blurring when enabling will-change when being able to compare against the left window without it. It's much more subtle on my display, but certainly seems to be much more noticeable on others.

Also if you could check in Foundry. Open up Item Piles and the Chrome dev tools / Elements. You can manually remove the will-change: transform from the inline styles by double clicking on the inline style. When looking at the element / app window in the dev tools you'll see a bottom app added to the body element like this:

Double click on the inline style and just edit out the will-change: transform and the idea is that the Item Piles app should then not be blurry.

[gsterling]

Also if you could check in Foundry. Open up Item Piles and the Chrome dev tools / Elements. You can manually remove the will-change: transform from the inline styles by double clicking on the inline style. When looking at the element / app window in the dev tools you'll see a bottom app added to the body element like this:

Double click on the inline style and just edit out the will-change: transform and the idea is that the Item Piles app should then not be blurry.

This did the trick! It looks sharp now.

[typhonrt]

@gsterling Well thanks for the testing. I can indeed easily remove this CSS property. It's not necessary strictly; a nice to have, but of course it is unfortunately triggering this Chrome bug. As things go this will require a rebuild of all packages w/ the latest UI library release, so hopefully things get updated in the coming couple of weeks.

[Haxxer]

@gsterling Does this still happen in the latest version of item piles?