[MainUI] unsharp window for Equipment and Properties view on homepage

[kuifje123]

The problem

When viewing the 'Equipment' and 'Properties' view on the homepage, using Safari browser (v14.0) on MacOS, I notice that the detailed view of the card is unsharp when opening a card.
This does not always occur. What I notice, is that when a small amount of items are contained in the card (i.e. no scrolling is applied) the card contents become unsharp. When opening a card with many items (i.e. scrolling enabled), the card is always sharp.

Furthermore, when the issue occurs, sometime by resizing (making smaller) the Safari browser window, when the card changes to a full window view, the contents are again sharp. But not always. I found situations that after resizing it remained unsharp.

See also my screen captures and video capture:

Expected behavior

The contents of a card are always shown sharp.

Steps to reproduce

This does not always occur. I have not found the exact cause yet.

Your environment

OH3 #2024 using the Docker debian snapshot.

Browser console

Browser network traffic

Additional information

[ghys]

Yes, I've noticed it before although never as severe, especially on your video
https://www.dropbox.com/s/z559fkqnznnmvwl/Screen%20Recording%202020-11-21%20at%2011.05.15.mov?dl=0

It has probably to do with the translate3d + scale transformations that are done to expand the card, combined with bad GPU acceleration. I have tried some supposed fixes I found here and there but had no success.
Can you reproduce it with the cards on https://f7appstore.netlify.com?

@nolimits4web maybe you have an idea? Your insight would be appreciated!

[kuifje123]

Hi @ghys I verified it with the cards from https://f7appstore.netlify.com
These examples look razor sharp.
Another thing I notice, is that upon expanding the card in openHAB, the rounded corners are somehow cut-off a bit. They are not exactly round anymore. As if the expansion is somehow slightly limited, and not fully executed.
I do not see that in the example link above.

[jensflorian]

I have the same issue with Safari on 10.15.7 - it is not a performance issue (Retina 5K, 40GB RAM). The cards from https://f7appstore.netlify.com are rendered correctly.
I notice it affects predominantly the cards that have a equipment/prioperties selector.

[toweosp]

Similar behavior here with Firefox 84.0 on Ubuntu 12.10. When opening a card the text is blurred. As soon as one moves the mouse over the text it is rendered correctly/sharp.

[timbms]

Same issue here with Safari 14.0.2 on macOS 11.1

[timbms]

Looks as if the blurring of the background is affecting the foreground. Could it be a tag/parenthesis not properly closed?

[GumbyMan82]

Just for completeness, there's also a thread in the community about this:
https://community.openhab.org/t/oh3-webui-one-blurry-locations-card-others-are-fine/114932

It happens for me oon only one card and by resizing the window it toggles between sharp and unsharp when reducing the height of the browser window.
Definitely happens only on chrome and egde (so maybe it's chromium related?). Firefox works well

[sidamos]

Same for me on Chrome on Linux. Not as bad as on these examples here. Furthermore, it is worse on the Locations tab. Equipment tab looks OK.

[CappuccinoCake]

Hey, is there any update to this issue? I am having this issue on iPhone app, in locations, where there is less content than a page. This means, if I don't have to scroll in the items, all gets blurred, but when there is more content than one page, and i scroll, the content is loaded without problems (sharp).

(update)
I now found out by accident, that this is also happening the same way on Debian and chrome browser.