[Dashboard] CSS Transforms lead to blurry text

[ThomThomson]

Kibana version: 8.9, 8.10, main

Describe the bug: Certain panels on Dashboards will suffer from blurry text in certain hardware configurations and certain Dashboard panel sizes / browser zoom levels.

Steps to reproduce:

1. Create any panel with text on a Dashboard
2. Resize the panel so it has a scroll bar
3. Zoom in and out in your browser
4. The text should get blurry.

Expected behavior: Text should remain crisp on every panel in the Dashboard regardless of zoom level,

Screenshots (if relevant):
In Chrome on an intel mac:

Same Dashboard, different browsers: Left is firefox and right is a Chromium based browser (Brave).

Any additional context:
This is a regression caused by #153610. In that PR we switched React Grid Layout to use CSS transforms which increased grid load performance on certain machines. There is an issue for this on the React Grid Layout side as well.

Workarounds

1. The main suggestion is to turn off hardware acceleration in your browser's settings. Keep in mind that this may break other functionalities in Kibana.
2. Alternatively, the text will not become blurry if there is no scroll bar in the panel, so to avoid blurry text you can also ensure that the panels can show all of their data without scrolling.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[thomasneirynck]

wrt https://github.com/elastic/sdh-kibana/issues/4204#issuecomment-1777570090

That panel has a background set

do we know why this is needed (e.g. light/dark mode (?))

[ThomThomson]

I believe so yes. The EUI Panels come with a background. The correct fix here is likely to just change which element receives the background.

[bataya0]

Are there any tricks to restoring the crisp / clear panels ? Or specific visualisation panel type to avoid until this is resolved.

This occurred for me in Chrome and Edge.

[ThomThomson]

@bataya0 as a workaround you could try making sure your panels don't have scroll bars.

[bataya0]

I cant avoid scroll bars on most panels given the amount of data i have to display.

I have panels on a dashboard that are clear and crisp, but if I edit and save one of the panels it goes blurry but the other panels dont, which is strange. Is the panel object behind the scenes being changed to use something newer, something we can edit and revert ?

[ThomThomson]

As far as I know, we haven't done any migrations or changes to panel styling that would be applying on editing, and I haven't been able to reproduce it. Is it happening to one specific type of chart? Lens, Maps, or TSVB for instance?

[bataya0]

The panels i've been seeing this occur on are Lens ones.

I have an open support case tracking this #01496976 , perhaps a zoom call to show you the issue occurring might help discover other clues ?

[ThomThomson]

If we end up using a pure CSS / HTML layout engine like in this investigation, we should be able to mitigate this issue by using grid instead of transforms.

[Heenawter]

Since we will be disabling CSS transforms for the hover panel actions, it looks like this issue will be closed by that PR without having to wait for the new layout engine 🎉 cc @cqliu1

Tested locally, and it fixed the blurry text in the saved search embeddable:

• Before (main):
  
• After (hover actions draft PR):
  
  (the GitHub image compression is making the difference slightly less obvious - but trust me, the text is definitely clearer in the "After" screenshot 😆)