From 925e0230b1f1b459ee0989c55dcc343a8a5ca531 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 30 Apr 2024 20:52:29 +0200
Subject: [PATCH] Use hack to use fixed image as background in safari

---
 src/panels/energy/ha-panel-energy.ts | 12 ++++++++++++
 src/panels/lovelace/hui-root.ts      | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 87b9a2f248..73dccae306 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -401,10 +401,22 @@ class PanelEnergy extends LitElement {
           padding-inline-start: env(safe-area-inset-left);
           padding-inline-end: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
+        }
+        /* Hack to support fixed background image on iOS */
+        #view:after {
+          display: block;
+          content: "";
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          position: fixed;
           background: var(
             --lovelace-background,
             var(--primary-background-color)
           );
+          background-attachment: local;
+          z-index: -1;
         }
         #view > * {
           flex: 1 1 100%;
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 939d063e82..1592b369ab 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1074,10 +1074,22 @@ class HUIRoot extends LitElement {
           padding-inline-start: env(safe-area-inset-left);
           padding-inline-end: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
+        }
+        /* Hack to support fixed background image on iOS */
+        #view:after {
+          display: block;
+          content: "";
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          position: fixed;
           background: var(
             --lovelace-background,
             var(--primary-background-color)
           );
+          background-attachment: local;
+          z-index: -1;
         }
         #view > * {
           flex: 1 1 100%;