fix #11041: The gauge card doesn't render correctly on iOS 15.2 / macOS 12.1 in the companion apps (#11363)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Radu Cotescu <radu-likes-to-code@cotescu.com>

src/components/ha-gauge.ts

@@ -1,16 +1,10 @@
 import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
-import { isSafari } from "../util/is_safari";
-
-// Safari version 15.2 and up behaves differently than other Safari versions.
-// https://github.com/home-assistant/frontend/issues/10766
-const isSafari152 = isSafari && /Version\/15\.[^0-1]/.test(navigator.userAgent);
 
 const getAngle = (value: number, min: number, max: number) => {
   const percentage = getValueInPercentage(normalize(value, min, max), min, max);
@@ -65,12 +59,12 @@ export class Gauge extends LitElement {
 
   protected render() {
     return svg`
-      <svg viewBox="0 0 100 50" class="gauge">
+      <svg viewBox="-50 -50 100 50" class="gauge">
         ${
           !this.needle || !this.levels
             ? svg`<path
           class="dial"
-          d="M 10 50 A 40 40 0 0 1 90 50"
+          d="M -40 0 A 40 40 0 0 1 40 0"
         ></path>`
             : ""
         }
@@ -87,9 +81,9 @@ export class Gauge extends LitElement {
                         stroke="var(--info-color)"
                         class="level"
                         d="M
-                          ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                          ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
-                          ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                          ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
-                         A 40 40 0 0 1 90 50
+                         A 40 40 0 0 1 40 0
                         "
                       ></path>`;
                   }
@@ -98,9 +92,9 @@ export class Gauge extends LitElement {
                       stroke="${level.stroke}"
                       class="level"
                       d="M
-                        ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                        ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
-                        ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                        ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
-                       A 40 40 0 0 1 90 50
+                       A 40 40 0 0 1 40 0
                       "
                     ></path>`;
                 })
@@ -110,46 +104,16 @@ export class Gauge extends LitElement {
           this.needle
             ? svg`<path
                 class="needle"
-                d="M 25 47.5 L 2.5 50 L 25 52.5 z"
+                d="M -25 -2.5 L -47.5 0 L -25 2.5 z"
-                style=${ifDefined(
+                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
-                  !isSafari
-                    ? styleMap({ transform: `rotate(${this._angle}deg)` })
-                    : undefined
-                )}
-                transform=${ifDefined(
-                  isSafari
-                    ? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
-                    : undefined
-                )}
               >
               `
             : svg`<path
                 class="value"
-                d="M 90 50.001 A 40 40 0 0 1 10 50"
+                d="M -40 0 A 40 40 0 1 0 40 0"
-                style=${ifDefined(
+                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
-                  !isSafari
-                    ? styleMap({ transform: `rotate(${this._angle}deg)` })
-                    : undefined
-                )}
-                transform=${ifDefined(
-                  isSafari
-                    ? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
-                    : undefined
-                )}
               >`
         }
-        ${
-          // Workaround for https://github.com/home-assistant/frontend/issues/6467
-          isSafari
-            ? svg`<animateTransform
-                attributeName="transform"
-                type="rotate"
-                from="0 50 50"
-                to="${this._angle} 50 50"
-                dur="1s"
-              />`
-            : ""
-        }
         </path>
       </svg>
       <svg class="text">
@@ -187,12 +151,10 @@ export class Gauge extends LitElement {
         fill: none;
         stroke-width: 15;
         stroke: var(--gauge-color);
-        transform-origin: 50% 100%;
         transition: all 1s ease 0s;
       }
       .needle {
         fill: var(--primary-text-color);
-        transform-origin: 50% 100%;
         transition: all 1s ease 0s;
       }
       .level {