From 3c157817885385298fb45c72b5d3eac7295a01ae Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 21 Jun 2024 14:40:51 +0100
Subject: [PATCH] Panel: Fix text aliasing bug when panel is loading (#89538)

* place loading bar animation in its own stacking context to prevent aliasing of text

* add comment
---
 .../grafana-ui/src/components/PanelChrome/PanelChrome.tsx     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 1aeff49e69f..e6f36c80491 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -423,6 +423,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'absolute',
       top: 0,
       width: '100%',
+      // this is to force the loading bar container to create a new stacking context
+      // otherwise, in webkit browsers on windows/linux, the aliasing of panel text changes when the loading bar is shown
+      // see https://github.com/grafana/grafana/issues/88104
+      zIndex: 1,
     }),
     containNone: css({
       contain: 'none',