Gauge card - no needle in HA 2021.12.1

[mchangsp]

Since upgrading to HA 2021.12.1 my gauge cards are missing a needle on the iOS mobile device.
On Chrome / Windows 11 the needle is present

The same display on iPhone 11 Pro with IOS 15.2 and latest HA mobile app version:

Before HA 2021.12.1 no needles were missing in the mobile client.

Here is the YAML code for the first three gauges:

type: grid
cards:
  - type: gauge
    entity: sensor.meter_electricity_currently_delivered
    min: 0
    max: 3000
    name: From Grid
    needle: true
  - type: conditional
    conditions:
      - entity: sensor.wf_uv_index
        state_not: '0'
    card:
      type: gauge
      entity: sensor.wf_uv_index
      min: 0
      max: 10
      severity:
        green: 0
        yellow: 5
        red: 7
      name: UV index
      unit: ' '
      needle: true
  - type: gauge
    name: Light
    min: 0
    entity: sensor.wf_illuminance
    needle: true
    max: 160000
square: true
columns: 3

Does anyone have tips how I can get the needle back?

[mike_sjogren (Mikael Sjögren)]

I have the same problem. But I found that it’s only a problem on the newly updated iOS device with iOS 15.2. On the older (15.1) iPad it’s works as before. So maybe it’s related to iOS version and not HA version?

[mchangsp]

Good point Mike!
After your post I tried the page on an iPhone 6s with iOS 15.1 On the iPhone 6s everything looks like it should be. The needles are present in iOS 15.1
Now, where can I enter a request so that somebody can take a closer look?

[mchangsp]

I found a page where somebody is reporting something similar

Lovelace Gauge UI Bugs

I will add a link to this discussion on that page.

[WallyR (Wally)]

Try to clear your browser cache while you are on another webpage.

[mchangsp]

The missing needles happen when I am using the HA iOS Mobile app and not in a browser.
Your suggestion inspired me to do the following:

• start the HA mobile app
• in Configuration / Companion App / Debugging select “Reset frontend cache”
• stop the HA Mobile App
• start the HA Mobile App.

Unfortunately the needles are not displayed on the screen.

[WallyR (Wally)]

Ok, good that you check that in the mobile app too, then the developers can rule that out

[oakman (kraiwut)]

After update my iPhone8 with iOS 15.2. I’m facing this problem too.

[ciottomate]

Same here.
Gauge card is misaligned
Ios15.2 (before it was ok)

[GD85]

I have to same after upgrading to IOS15.2.
Reinstalling the app was not a solution…

[CitizenE]

Same thing on Mac OS Monterey 12.1 in both Safari and the HA Companion App. But not in Chrome or FireFox.
Looks like a change in Apple’s WebKit is causing this.

[MHerweijer]

Same issue here. iOS 15.1 works fine. iOS 15.2 shows misaligned gauges

[huu]

yep… Just upgrade to ios 15.2 broke the gauges. on both browser and mobile apps, first thought it safari issues downloaded chrome on iphone, still the same.

[MHerweijer]

iOS HA app update 2021.12 does not solve the issue unfortunately

[AdriedeRegt]

Same here, happened after update iOS to 15.2

Adrie de Regt

[linickx (Nick)]

+1 - Broken after upgrading to IOS15.2. As well as the frontend issue linked above, this one is also open for the IOS App: Gauge not displayed properly · Issue #2002 · home-assistant/iOS · GitHub

[psu1989]

Happens on Macbook Pro Monterey and the Home Assistant app but is ok in Chrome.

[hesspoint (Hannes)]

Can confirm. Issue happens on iPhone, iPad, Mac in the HA app. All devices on 15.2 and latest Monterrey

[snhnic]

Still no luck? Had the update and needle as colors miss lined

[e-raser]

Yes, still no progress on this. I think the GitHub PR has some issues. Hoping for 2022.2 …

Meanwhile I started to switch over to custom:bar-card because this broken gauge view is just horrible after so many weeks.