diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts
index 5e008a732e7..cee459b0eab 100644
--- a/packages/grafana-data/src/types/featureToggles.gen.ts
+++ b/packages/grafana-data/src/types/featureToggles.gen.ts
@@ -258,4 +258,5 @@ export interface FeatureToggles {
infinityRunQueriesInParallel?: boolean;
inviteUserExperimental?: boolean;
extraLanguages?: boolean;
+ noBackdropBlur?: boolean;
}
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
index 12e094433d2..b8f4800fbae 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
+++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
@@ -14,6 +14,7 @@ import { getExtraStyles } from './extra';
import { getFilterTableStyles } from './filterTable';
import { getFontStyles } from './fonts';
import { getFormElementStyles } from './forms';
+import { getHacksStyles } from './hacks';
import { getJsonFormatterStyles } from './jsonFormatter';
import { getLegacySelectStyles } from './legacySelect';
import { getMarkdownStyles } from './markdownStyles';
@@ -24,9 +25,14 @@ import { getSlateStyles } from './slate';
import { getUplotStyles } from './uPlot';
import { getUtilityClassStyles } from './utilityClasses';
+interface GlobalStylesProps {
+ hackNoBackdropBlur?: boolean;
+}
+
/** @internal */
-export function GlobalStyles() {
+export function GlobalStyles(props: GlobalStylesProps) {
const theme = useTheme2();
+ const { hackNoBackdropBlur } = props;
return (
);
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts b/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts
new file mode 100644
index 00000000000..1e4fea76a6f
--- /dev/null
+++ b/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+
+export interface Hacks {
+ hackNoBackdropBlur?: boolean;
+}
+
+export function getHacksStyles(hacks: Hacks) {
+ return css([
+ /**
+ * Disables all backdrop blur effects to improve performance on extremely
+ * resource constrained devices.
+ *
+ * Controlled via the `noBackdropBlur` feature toggle in Grafana
+ */
+ hacks.hackNoBackdropBlur && {
+ '*, *:before, *:after': {
+ backdropFilter: 'none !important',
+ },
+ },
+ ]);
+}
diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go
index d9053899ef8..f92929fceaf 100644
--- a/pkg/services/featuremgmt/registry.go
+++ b/pkg/services/featuremgmt/registry.go
@@ -1811,6 +1811,15 @@ var (
Owner: grafanaFrontendPlatformSquad,
FrontendOnly: true,
},
+ {
+ Name: "noBackdropBlur",
+ Description: "Disables backdrop blur",
+ Stage: FeatureStageExperimental,
+ Owner: grafanaFrontendPlatformSquad,
+ HideFromAdminPage: true,
+ HideFromDocs: true,
+ FrontendOnly: true,
+ },
}
)
diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv
index 4d6d6ca54bc..d54698fe6e6 100644
--- a/pkg/services/featuremgmt/toggles_gen.csv
+++ b/pkg/services/featuremgmt/toggles_gen.csv
@@ -239,3 +239,4 @@ grafanaManagedRecordingRulesDatasources,experimental,@grafana/alerting-squad,fal
infinityRunQueriesInParallel,privatePreview,@grafana/oss-big-tent,false,false,false
inviteUserExperimental,experimental,@grafana/sharing-squad,false,false,true
extraLanguages,experimental,@grafana/grafana-frontend-platform,false,false,true
+noBackdropBlur,experimental,@grafana/grafana-frontend-platform,false,false,true
diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go
index 55b65a745c2..4d2ff0b954a 100644
--- a/pkg/services/featuremgmt/toggles_gen.go
+++ b/pkg/services/featuremgmt/toggles_gen.go
@@ -966,4 +966,8 @@ const (
// FlagExtraLanguages
// Enables additional languages
FlagExtraLanguages = "extraLanguages"
+
+ // FlagNoBackdropBlur
+ // Disables backdrop blur
+ FlagNoBackdropBlur = "noBackdropBlur"
)
diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json
index 89f92814f9f..12c658a56d5 100644
--- a/pkg/services/featuremgmt/toggles_gen.json
+++ b/pkg/services/featuremgmt/toggles_gen.json
@@ -2913,6 +2913,21 @@
"hideFromDocs": true
}
},
+ {
+ "metadata": {
+ "name": "noBackdropBlur",
+ "resourceVersion": "1741879106163",
+ "creationTimestamp": "2025-03-13T15:18:26Z"
+ },
+ "spec": {
+ "description": "Disables backdrop blur",
+ "stage": "experimental",
+ "codeowner": "@grafana/grafana-frontend-platform",
+ "frontend": true,
+ "hideFromAdminPage": true,
+ "hideFromDocs": true
+ }
+ },
{
"metadata": {
"name": "nodeGraphDotLayout",
diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx
index fdbf6bf3b2d..fb241de0224 100644
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@@ -121,7 +121,7 @@ export class AppWrapper extends Component {
actions={[]}
options={{ enableHistory: true, callbacks: { onSelectAction: commandPaletteActionSelected } }}
>
-
+
diff --git a/public/app/routes/RoutesWrapper.tsx b/public/app/routes/RoutesWrapper.tsx
index 8a897553c7c..7e4701f040e 100644
--- a/public/app/routes/RoutesWrapper.tsx
+++ b/public/app/routes/RoutesWrapper.tsx
@@ -6,6 +6,7 @@ import { CompatRouter } from 'react-router-dom-v5-compat';
import { GrafanaTheme2 } from '@grafana/data/';
import {
+ config,
locationService,
LocationServiceProvider,
useChromeHeaderHeight,
@@ -114,7 +115,7 @@ export function ExperimentalSplitPaneRouterWrapper(props: RouterWrapperProps) {
-
+