Graphics distorted since iOS 15.2

AdriedeRegt · December 16, 2021, 10:00pm

distorted-graphics

I updated my iOS to 15.2 yesterday and now I see that some graphs are distorted in the app. In a browser all seems fine.
Am I the only one that experiences this?

Adrie de Regt

Nabs · December 17, 2021, 2:51pm

I see the same, though I don’t know if it started after upgrading to iOS 15.2, or Home Assistant Core 2021.12.2. I did both of them on the same day.

rossk · December 17, 2021, 5:42pm

The problem appears to have been reported here:

github.com/home-assistant/frontend

The gauge card doesn't render correctly on Safari 15.1 on macOS / iOS

opened 02:07PM - 02 Dec 21 UTC

raducotescu

bug safari

### Checklist - [X] I have updated to the latest available Home Assistant versi…on. - [X] I have cleared the cache of my browser. - [X] I have tried a different browser to see if it is related to my browser. ### Describe the issue you are experiencing In Safari or Safari web-views (e.g. the Home Assistant iOS/macOS companion apps) the `gauge` card doesn't correctly render its dial. <img width="511" alt="Screenshot 2021-12-02 at 15 00 01" src="https://user-images.githubusercontent.com/170911/144436986-193a5907-e5e0-4c0f-9a73-78dd260ce796.png"> This seems to be due to the way the rotation transformation is applied, via the `transform` SVG attribute [0]: 1. https://github.com/home-assistant/frontend/blob/2a5fc5181e4d1c39588499ac62c4a4fd818508f3/src/components/ha-gauge.ts#L116 2. https://github.com/home-assistant/frontend/blob/2a5fc5181e4d1c39588499ac62c4a4fd818508f3/src/components/ha-gauge.ts#L129 In my test on macOS Safari it seems that the rotation point is not needed anymore (i.e. the transform could be written like: `transform="rotate(<angle>)"`). Furthermore, Safari supports CSS transform rotate, so this could be treated the same like for other browsers. [0] - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform ### Describe the behavior you expected The gauge cards should render correctly, like in all the other browsers (e.g. Firefox, Chrome). ### Steps to reproduce the issue Have a `gauge` card configured like: ```yaml - type: gauge entity: sensor.temperature min: 0 max: 100 severity: green: 20 yellow: 22 red: 25 name: ' ' ``` ### What version of Home Assistant Core has the issue? core-2021.11.5 ### What was the last working version of Home Assistant Core? _No response_ ### In which browser are you experiencing the issue with? Safari 15.1 ### Which operating system are you using to run this browser? macOS 12.0, macOS 12.1, iOS 15.1, iOS 15.2 ### State of relevant entities _No response_ ### Problem-relevant frontend configuration _No response_ ### Javascript errors shown in your browser console/inspector _No response_ ### Additional information The card works correctly on iOS 14.8.1.

raf10 · January 4, 2022, 11:02pm

I upgraded my Iphone yesterday from IOS 15.1 to 15.2 and have the same issue with the graphs in the App. I tried tried my wife’s phone that is still on 15.1 and it works fine no issues with the graphs.

matbic · January 5, 2022, 11:38pm

Same problem for me as well.