Fix gauge when safari is zoomed (#6492)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
home-assistant · Aug 3, 2020 · 8fb62eb · 8fb62eb
1 parent 209dd99
commit 8fb62eb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts
@@ -9,6 +9,7 @@ import {
 } from "lit-element";
 import { styleMap } from "lit-html/directives/style-map";
 import { afterNextRender } from "../common/util/render-status";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 const getAngle = (value: number, min: number, max: number) => {
   const percentage = getValueInPercentage(normalize(value, min, max), min, max);
@@ -27,6 +28,9 @@ const getValueInPercentage = (value: number, min: number, max: number) => {
   return (100 * newVal) / newMax;
 };
 
+// Workaround for https://github.com/home-assistant/frontend/issues/6467
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 @customElement("ha-gauge")
 export class Gauge extends LitElement {
   @property({ type: Number }) public min = 0;
@@ -69,9 +73,28 @@ export class Gauge extends LitElement {
         ></path>
         <path
           class="value"
-          style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
           d="M 90 50.001 A 40 40 0 0 1 10 50"
-        ></path>
+          style=${ifDefined(
+            !isSafari
+              ? styleMap({ transform: `rotate(${this._angle}deg)` })
+              : undefined
+          )}
+          transform=${ifDefined(
+            isSafari ? `rotate(${this._angle} 50 50)` : undefined
+          )}
+        >
+        ${
+          isSafari
+            ? svg`<animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 50 50"
+                to="${this._angle} 50 50"
+                dur="1s"
+              />`
+            : ""
+        }
+        </path>
       </svg>
       <svg class="text">
         <text class="value-text">
@@ -106,8 +129,8 @@ export class Gauge extends LitElement {
         fill: none;
         stroke-width: 15;
         stroke: var(--gauge-color);
-        transition: all 1000ms ease 0s;
         transform-origin: 50% 100%;
+        transition: all 1s ease 0s;
       }
       .gauge {
         display: block;

diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
@@ -250,7 +250,7 @@ class HUIRoot extends LitElement {
                           </mwc-list-item>
                         `
                       : ""}
-                    ${this.hass!.user!.is_admin && !this.hass!.config.safe_mode
+                    ${this.hass!.user?.is_admin && !this.hass!.config.safe_mode
                       ? html`
                           <mwc-list-item
                             aria-label=${this.hass!.localize(