No weather icons with 2024.8

[Maddin1684]

With Core Update 2024.8 no weather-icons are shown.

Desktop (please complete the following information):

• WEATHER-CHART-CARD VERSION 2.4.7
• HOME ASSISTANT VERSION AND INSTALLATION TYPE 2024.8
  

[knuckleheadsmiff]

I’m seeing the same thing on my iPad running the home assistant app. Im also running the very latest home assistant core that has changes to be new section layout page where I use this view.

[Maddin1684]

Can confirm, only on iPad companion app.
iPhone or safari browser on iPad works fine.

[knuckleheadsmiff]

On the iPhone and in the safari browser things look slightly better but the weather icons are still not showing. You can see the space for them above the wind direct forecasts below but they are blank.

The HA app on the iPad looks like the original post. HA Core is 2024.8.0

(I have another oddity in with fireremote only on the iPad where layout and scaling is completely messed up and with another standard Lovelace plugin for a weather gauge where the background is also messed up compare with using the browser so there might be multiple bugs here?)

[nvdael]

Same here.
Only iPad companion app, Safari on iPad is broken.
Android Phone and Windows Desktop both with Edge no problems.
No themes loaded.

[vlado05]

Same here.
Fully kiosk browser on NSPanel pro.

[Kanecaine]

Having this problem since the update to HA 2024.8 on iPad using the official companion app. On same iPad with Safari everything is ok. I can produce the error already in the card selection:

I inspected the rendered HTML and found out that it might has to come from the rendered style-Tag right before the ha-card-tag. The big "25" (same as the "50" in comment #1) comes from the icon-size. When i change the default value in the ui config of the card from "25" to "24" than a big 24 is rendered instead. It gets even more strange when i delete the icon-size in the ui config: in this case, the big "25" and the following little "25" is not shown (it is rendered instead of a card-title if it is set. So the optional card-title is never rendered).

This is the correspondig code from the card js:

  ha-icon {
    color: var(--paper-item-icon-color);
  }
  img {
    width: ${config.icons_size}px;
    height: ${config.icons_size}px;
  }
  .card {
    padding-top: ${config.title ? '0px' : '16px'};

Every variable value is rendered directly into the html. The first variable is config.icon_size which renders the first (big) "25". Then in the next line it is again config.icon_size which renders the second (little) "25". After that the variable config.title is evaluated. When i define a title (that again is never rendered) it shows "0px" otherwise "16px" as in the image above. So it seems to be some strange escaping issue. Unfortunately i cannot inspect the html within the companion app.

[Kanecaine]

Seems to be a bug in the ios companion app as some rendering issues are mentioned in the bug tracker, see the link above.

[knuckleheadsmiff]

I have the issue shown in the link too (with rireremite) BUT even on a regular browser not in the companion app I can’t see the hourly status icons. If you look at my post above you can see the icons missing even though the card mostly looks correct. Again, that image of mine above was NOT in the companion app.

[Kanecaine]

@knuckleheadsmiff Which browser are you using? I suppose this is something different. Maybe the missing icons can be brought back by clearing the browser cache - in Firefox pressing STRG + R works like wonders in some situations like this.

edit: tried it with Safari 17.5 and i see the icons. So i really think this could be a browser cache problem, so try CMD + R.

[knuckleheadsmiff]

@knuckleheadsmiff Which browser are you using? I suppose this is something different. Maybe the missing icons can be brought back by clearing the browser cache - in Firefox pressing STRG + R works like wonders in some situations like this.

It is the same on the HA iPhone app running on the iPhone and on the safari browser on the iPad or iPhone. It’s not a cache issue.

[nvdael]

@knuckleheadsmiff Which browser are you using? I suppose this is something different. Maybe the missing icons can be brought back by clearing the browser cache - in Firefox pressing STRG + R works like wonders in some situations like this.

edit: tried it with Safari 17.5 and i see the icons. So i really think this could be a browser cache problem, so try CMD + R.

As I mentioned in my post yesterday, I experienced it on safari and the companion app.
Both are first runs on a fresh installed iPad, so cache cannot be an issue.

#222 (comment)

[Kanecaine]

Ok, I understand. However, I think that these are maybe 2 different problems that need to be distinguished.

(1) In one case, css-styles (like "16px 28 100") are rendered and as a result other things like the title, all information above the graph as well as icons, wind speed and direction underneath the graph are not displayed. This problem only occurs in the companion app. This is described in the original post #222 (comment) ... does anyone have this outside the app in another browser?

(2) In another case, the daily weather icons are missing (which at least i cannot confirm on my devices). This problem occurs both in the app and in the Safari browser on the iPad and looks as described here #222 (comment) ...

@vlado05 confirmed a faulty display in the Fully Kiosk browser on an NSPanel. I assume this refers to the second case where only the icons are missing?

[knuckleheadsmiff]

#2 above is also on the iPhone (ha app and safari browser).

[jzielke84]

Possibly related to home-assistant/iOS#2908

[Kanecaine]

Here is a workaround: if you are using card mod, paste this yaml into a new card and place this new card before the one that is buggy:

type: custom:weather-chart-card
entity: 'bad'
card_mod:
  style: |
    ha-card {
     display: none;
    }

It's important not to use the UI editor, as it may attempt to auto-correct the incorrect YAML. Simply paste the lines above and hit "Save." Due to card mod, this faulty card will not be displayed, but it prevents the display bug in your card.

Credits go to this thread: home-assistant/iOS#2908 (comment)

[edgarveersel]

Thank you, @Kanecaine, this indeed works. After checking the original thread, I now only put in this, which also works:

type: custom:weather-chart-card
entity: 'bad'

It does however create a box.

Seems it can be hidden when you have card-mod installed. I didn't try that myself.

[mlamberts78]

PR from @piitaya was partly working, icon and text sizes where messy after update. reopened.

[mlamberts78]

Fixed with latest IOS APP update 2024.8

[greg520820]

Version 2.4.9 still doesn't render correctly on an Android tablet running fully kiosk. Core version 2024.8.3 Get the following display:

[knuckleheadsmiff]

It’s because HA core says that you have a legacy browser. They fixed the iPad issue in the front end update. Why they changed the legacy browser support is beyond me.

[greg520820]

It’s because HA core says that you have a legacy browser. They fixed the iPad issue in the front end update. Why they changed the legacy browser support is beyond me.

According to the link and quote below there may not be any plans to fix it in HA and instead needs to be fixed in the custom card code.

"As a fix, The custom card code needs to use static styles and adapt the style using css variables and classes (classMap and styleMap) instead of using dynamic style with template literals. I don't think we can fix it on the HA side."

home-assistant/iOS#2908 (comment)

[knuckleheadsmiff]

Yea, well they also broke a bunch of unmaintained cards like the weather radar card on browsers where it worked. I don’t under their legacy browser policy but I think it’s broken in how they close to not support (or define) legacy browsers.

[jzielke84]

Version 2.4.9 still doesn't render correctly on an Android tablet running fully kiosk. Core version 2024.8.3 Get the following display:

Confirmed