frontend
frontend copied to clipboard
home-assistant
Weather Card has become "buggy" (shifts layout on load)
Checklist
- [x] I have updated to the latest available Home Assistant version.
- [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.
- [x] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.
Describe the issue you are experiencing
It looks like the daily weather information (forecast data) is reloaded when the View is loaded or reopened. It is a bit "random" when it happens. Mostly on initial load. This shifts the layout for around 500-2000ms when the View is opened. Looking at the dev console, the following errors are shown:
Microsoft Edge
hui-weather-forecast-card.ts:246 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')
at k.render (hui-weather-forecast-card.ts:246:36)
at k.update (lit-element.ts:166:24)
at k.performUpdate (reactive-element.ts:1503:14)
at k.scheduleUpdate (reactive-element.ts:1399:25)
at k._$EP (reactive-element.ts:1371:25)
Mozilla Firefox
Uncaught (in promise) TypeError: this._sizeController.value is undefined
render hui-weather-forecast-card.ts:246
update lit-element.ts:166
performUpdate reactive-element.ts:1503
scheduleUpdate reactive-element.ts:1399
_$EP reactive-element.ts:1371
4 hui-weather-forecast-card.ts:246:8
Describe the behavior you expected
In the previous version the layout didn't shift when the View was opened.
Similar report in HA forum: https://community.home-assistant.io/t/errors-in-weather-forecast-card-and-not-existant-files/900770
Steps to reproduce the issue
square: false
columns: 1
type: grid
cards:
- square: false
columns: 2
type: grid
cards:
- type: tile
entity: sun.sun
name: Rising
show_entity_picture: true
vertical: true
state_content: next_rising
icon: mdi:weather-sunset-up
features_position: bottom
- type: tile
entity: sun.sun
name: Setting
show_entity_picture: false
vertical: true
state_content: next_setting
icon: mdi:weather-sunset-down
features_position: bottom
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
secondary_info_attribute: wind_speed
forecast_slots: 5
What version of Home Assistant Core has the issue?
core-2025.6.0
What was the last working version of Home Assistant Core?
core-2025.5.3
In which browser are you experiencing the issue?
Microsoft Edge v137.0.3296.68 / Mozilla Firefox v139.0.4
Which operating system are you using to run this browser?
Microsoft Windows 11 Home (10.0.26100 Build 26100)
State of relevant entities
temperature: 15.4
dew_point: 7.5
temperature_unit: °C
humidity: 60
cloud_coverage: 72.5
uv_index: 1.2
pressure: 1026
pressure_unit: hPa
wind_bearing: 130.2
wind_gust_speed: 12.19
wind_speed: 6.89
wind_speed_unit: m/s
visibility_unit: km
precipitation_unit: mm
attribution: >-
Weather forecast from met.no, delivered by the Norwegian Meteorological
Institute.
friendly_name: Forecast Home
supported_features: 3
Problem-relevant frontend configuration
title: Testing
path: vacuum
icon: mdi:robot-vacuum
badges: []
cards:
- square: false
columns: 1
type: grid
cards:
- square: false
columns: 2
type: grid
cards:
- type: tile
entity: sun.sun
name: Rising
show_entity_picture: true
vertical: true
state_content: next_rising
icon: mdi:weather-sunset-up
features_position: bottom
- type: tile
entity: sun.sun
name: Setting
show_entity_picture: false
vertical: true
state_content: next_setting
icon: mdi:weather-sunset-down
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
secondary_info_attribute: wind_speed
forecast_slots: 5
- square: false
columns: 2
type: grid
cards:
- type: tile
entity: binary_sensor.check_weather_bike
name: Bikeable
- type: tile
entity: binary_sensor.check_weather_walk
hide_state: false
vertical: false
show_entity_picture: false
name: Walking
- type: entities
entities:
- entity: sensor.affalddk_mannehoj_36_rest_madaffald
name: Mad- og restaffald
icon: mdi:food
- entity: sensor.affalddk_mannehoj_36_pap_papir_glas_metal
name: Genbrug (grønt låg)
icon: mdi:newspaper
type: custom:secondaryinfo-entity-row
secondary_info: <small>Pap og papir, Glas- og metalaffald</small>
- entity: sensor.affalddk_mannehoj_36_plast_mad_drikkekartoner
name: Genbrug (blåt låg)
icon: mdi:recycle-variant
type: custom:secondaryinfo-entity-row
secondary_info: <small>Mad- og drikkekartoner og plast</small>
- entity: sensor.affalddk_mannehoj_36_naeste_afhentning
name: Miljøkasse (rød)
icon: mdi:alert
type: custom:secondaryinfo-entity-row
secondary_info: <small>Farligt affald</small>
state_color: true
show_header_toggle: false
- type: markdown
content: >-
[Mad- og
restaffald](https://vejen.dk/borger/natur-miljoe-og-affald/affald-og-genbrug/dit-daglige-affald/saadan-sorterer-du-alt-dit-affald/saadan-sorterer-du-dit-mad-og-restaffald),
[Mad- og drikkekartoner og
plast](https://vejen.dk/borger/natur-miljoe-og-affald/affald-og-genbrug/dit-daglige-affald/saadan-sorterer-du-alt-dit-affald/find-ud-af-hvordan-du-sorterer-mad-og-drikkekartoner-og-plast),
[Pap og
papir](https://vejen.dk/borger/natur-miljoe-og-affald/affald-og-genbrug/dit-daglige-affald/saadan-sorterer-du-alt-dit-affald/saadan-sorterer-du-dit-pap-og-papiraffald),
[Glas- og
metalaffald](https://vejen.dk/borger/natur-miljoe-og-affald/affald-og-genbrug/dit-daglige-affald/saadan-sorterer-du-alt-dit-affald/saadan-sorterer-du-dit-glas-og-metalaffald)
og [Rød miljøkasse
](https://vejen.dk/borger/natur-miljoe-og-affald/affald-og-genbrug/dit-daglige-affald/saadan-sorterer-du-alt-dit-affald/find-ud-af-hvordan-du-bruger-din-miljoekasse-her)
([PDF](https://vejen.dk/p/Dokumenter%20Vejen/Borger/Natur-%20milj%C3%B8%20og%20affald/Affald%20og%20genbrug/Sorteringsguides/Sorteringsguide-A4-2023--22000-.pdf)).
Kort over
[Genbrugspladsen](https://vejen.maps.arcgis.com/apps/instant/interactivelegend/index.html?appid=878134e7fdc84b9ca55536f9c855ce0b)
([info](https://vejen.dk/borger/natur-miljoe-og-affald/affald-og-genbrug/genbrugspladser/)).
- square: false
type: grid
cards:
- type: entities
entities:
- entity: binary_sensor.anyone_home
name: Residents
icon: mdi:account-group
- entity: input_boolean.guest_mode
icon: mdi:bag-suitcase
- entity: input_boolean.vacation_mode
state_color: true
- type: custom:vacuum-card
entity: vacuum.roborock_s8_pro_ultra
actions:
start:
service: xiaomi_miio.vacuum_clean_segment
service_data:
entity_id: vacuum.vacuum_cleaner
segments:
- 16
- 20
stats:
default:
- entity_id: sensor.roborock_s8_pro_ultra_filter_time_left
value_template: '{{ (value | float(0) / 3600) | round(1) }}'
unit: h
subtitle: Filter
- entity_id: sensor.roborock_s8_pro_ultra_side_brush_time_left
value_template: '{{ (value | float(0) / 3600) | round(1) }}'
unit: h
subtitle: Side brush
- entity_id: sensor.roborock_s8_pro_ultra_main_brush_time_left
value_template: '{{ (value | float(0) / 3600) | round(1) }}'
unit: h
subtitle: Main brush
- entity_id: sensor.roborock_s8_pro_ultra_sensor_time_left
value_template: '{{ (value | float(0) / 3600) | round(1) }}'
unit: h
subtitle: Sensors
columns: 1
JavaScript errors shown in your browser console/inspector
Microsoft Edge
hui-weather-forecast-card.ts:246 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')
at k.render (hui-weather-forecast-card.ts:246:36)
at k.update (lit-element.ts:166:24)
at k.performUpdate (reactive-element.ts:1503:14)
at k.scheduleUpdate (reactive-element.ts:1399:25)
at k._$EP (reactive-element.ts:1371:25)
render @ hui-weather-forecast-card.ts:246
update @ lit-element.ts:166
performUpdate @ reactive-element.ts:1503
scheduleUpdate @ reactive-element.ts:1399
_$EP @ reactive-element.ts:1371
await in _$EP
requestUpdate @ reactive-element.ts:1310
_$Ev @ reactive-element.ts:1055
C @ reactive-element.ts:1038
i @ lit-element.ts:130
k @ hui-weather-forecast-card.ts:43
I @ scoped-custom-element-registry.ts:642
t @ scoped-custom-element-registry.ts:408
s @ create-element-base.ts:149
u @ create-element-base.ts:312
_ @ create-card-element.ts:97
_loadElement @ hui-card.ts:137
load @ hui-card.ts:42
_createCardElement @ hui-stack-card.ts:75
(anonymous) @ hui-stack-card.ts:44
setConfig @ hui-stack-card.ts:43
setConfig @ hui-grid-card.ts:63
s @ create-element-base.ts:153
u @ create-element-base.ts:312
_ @ create-card-element.ts:97
_loadElement @ hui-card.ts:137
load @ hui-card.ts:42
_createCardElement @ hui-view.ts:114
(anonymous) @ hui-view.ts:473
_createCards @ hui-view.ts:472
_setConfig @ hui-view.ts:337
_initializeConfig @ hui-view.ts:362
await in _initializeConfig
willUpdate @ hui-view.ts:192
performUpdate @ reactive-element.ts:1501
t.performUpdate @ storage.ts:172
scheduleUpdate @ reactive-element.ts:1399
_$EP @ reactive-element.ts:1371
await in _$EP
requestUpdate @ reactive-element.ts:1310
_$Ev @ reactive-element.ts:1055
C @ reactive-element.ts:1038
A @ hui-view.ts:74
I @ scoped-custom-element-registry.ts:642
t @ scoped-custom-element-registry.ts:408
_selectView @ hui-root.ts:984
(anonymous) @ hui-root.ts:616
setTimeout
(anonymous) @ render-status.ts:2
requestAnimationFrame
a @ render-status.ts:2
updated @ hui-root.ts:606
_$AE @ reactive-element.ts:1552
performUpdate @ reactive-element.ts:1517
scheduleUpdate @ reactive-element.ts:1399
_$EP @ reactive-element.ts:1371
await in _$EP
requestUpdate @ reactive-element.ts:1310
set @ reactive-element.ts:789
j @ lit-html.ts:1983
_$AI @ lit-html.ts:1923
p @ lit-html.ts:1282
$ @ lit-html.ts:1636
_$AI @ lit-html.ts:1475
j @ lit-html.ts:2274
update @ lit-element.ts:171
performUpdate @ reactive-element.ts:1503
scheduleUpdate @ reactive-element.ts:1399
_$EP @ reactive-element.ts:1371
await in _$EP
requestUpdate @ reactive-element.ts:1310
set @ reactive-element.ts:789
updatePageEl @ partial-panel-resolver.ts:97
update @ hass-router-page.ts:138
performUpdate @ reactive-element.ts:1503
scheduleUpdate @ reactive-element.ts:1399
_$EP @ reactive-element.ts:1371
await in _$EP
requestUpdate @ reactive-element.ts:1310
set @ reactive-element.ts:789
j @ lit-html.ts:1983
_$AI @ lit-html.ts:1923
p @ lit-html.ts:1282
$ @ lit-html.ts:1636
_$AI @ lit-html.ts:1475
j @ lit-html.ts:2274
update @ lit-element.ts:171
performUpdate @ reactive-element.ts:1503
scheduleUpdate @ reactive-element.ts:1399
_$EP @ reactive-element.ts:1371
await in _$EP
requestUpdate @ reactive-element.ts:1310
set @ reactive-element.ts:789
j @ lit-html.ts:1983
_$AI @ lit-html.ts:1923
p @ lit-html.ts:1282
$ @ lit-html.ts:1636
_$AI @ lit-html.ts:1475
j @ lit-html.ts:2274
update @ lit-element.ts:171
performUpdate @ reactive-element.ts:1503
t.performUpdate @ storage.ts:172
scheduleUpdate @ reactive-element.ts:1399
_$EP @ reactive-element.ts:1371
await in _$EP
requestUpdate @ reactive-element.ts:1310
set @ reactive-element.ts:789
t @ home-assistant.ts:118
(anonymous) @ home-assistant.ts:128
a @ fire_event.ts:75
i @ navigate.ts:61
_navigateToView @ hui-root.ts:869
_handleViewSelected @ hui-root.ts:929
handleEvent @ lit-html.ts:2105
emit @ chunk.4TUIT776.js:30
setActiveTab @ chunk.UGXNRQQX.js:222
handleClick @ chunk.UGXNRQQX.js:135
handleClick @ sl-tab-group.ts:33
handleEvent @ lit-html.ts:2105
Mozilla Firefox
Uncaught (in promise) TypeError: this._sizeController.value is undefined
render hui-weather-forecast-card.ts:246
update lit-element.ts:166
performUpdate reactive-element.ts:1503
scheduleUpdate reactive-element.ts:1399
_$EP reactive-element.ts:1371
4 hui-weather-forecast-card.ts:246:8
Additional information
No response
+1
I have the same issue. this._sizeController.value is undefined in render method
In my case weather card is jumping (see the gif below).
if I change entity from Yandex Pogoda to HA Forecast then it is OK until I change its name to something short (space or dash, for ex). Once changed, it starts to jump again. Tried different devices (iOS, Mac), different browsers, cache clean up - nothing helps.
suppose this is the same I notice:
- type: weather-forecast
entity: weather.knmi
forecast_type: daily
hold_action:
action: navigate
navigation_path: /ui-sub-views/knmi
the card itself is behaving properly and the navigation is also valid and correct
the weather entity does not make a difference either, I tried the same config with a few others I use, and the console remains the same
I noticed the same after update Home Assistant to version 2025.06.1.
This error is coming from this line and it was introduced in this pull request.
Also an error in defining very-very-narrow to width.
https://github.com/home-assistant/frontend/blob/cf03e041a86f4ef77a2af310760405e7ec9be5f5/src/panels/lovelace/cards/hui-weather-forecast-card.ts#L83-L90
Might be because of this change:
https://github.com/home-assistant/frontend/commit/3ce639946c06e1de28a1309ac396b88e5fde4e7d#diff-4f7195942cc7cdfbd5ad6149411b2d6fb641035063b8711026e641d7f1a2a606L235