If you use your card, re-entering homeassistant will automatically return you to the top.

[Ainndy]

Upload.from.GitHub.for.iOS.MOV

[aukedejong]

I did not intentionally build in a scroll to top function.
I can't reproduce this on MacOS en IOS and I don't have an Android device.

Are you sure the windrose-card is causing this?

[Ainndy]

I did not intentionally build in a scroll to top function.

I can't reproduce this on MacOS en IOS and I don't have an Android device.

Are you sure the windrose-card is causing this?

Yes, using windrose-card will automatically scroll to the top. device is iOS

[Ainndy]

Upload.from.GitHub.for.iOS.MOV

[aukedejong]

Thanks for the movies.
I can reproduce the issue now.
No idea how to fix it yet.

[aukedejong]

I did some tests, trying to find out what causes this issue. No results yet.

[Ainndy]

I did some tests, trying to find out what causes this issue. No results yet.

Come on 💪

[aukedejong]

I had the hope that updating some dependencies would fix this, but no luck yet.
Can you confirm that version 1.13.0 still has this issue?

[Ainndy]

I had the hope that updating some dependencies would fix this, but no luck yet.

Can you confirm that version 1.13.0 still has this issue?

yes..

[Ainndy]

I had the hope that updating some dependencies would fix this, but no luck yet. Can you confirm that version 1.13.0 still has this issue?

hello, This is answered by gpt.

2. Relevant platform basics

• Custom‑card lifecycle (you’re using a LitElement‑based card) https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/?utm_source=chatgpt.com
• LitElement update cycle (how requestUpdate(), render(), updated() work) https://lit.dev/docs/v1/components/lifecycle/?utm_source=chatgpt.com
• https://lit.dev/docs/components/lifecycle/?utm_source=chatgpt.com

Understanding that every time you call requestUpdate() or your component’s properties change, LitElement may re‑render your entire card container—if the Lovelace view notices any card changes, it can reflow the DOM and reset the scroll.

---

3. Step‑by‑step debugging & root‑cause analysis

3.1. Isolate the card in a minimal dashboard

1. New Lovelace view with only your windrose-card and the default theme.
2. Confirm that disconnect/reconnect alone reproduces the scroll‑to‑top.
   • If still present, it’s definitely this card.

3.2. Instrument lifecycle methods with console logging

Add console.log() statements to key hooks to see exactly when a full re‑render happens:

setConfig(config) {
  console.log('🌪️ setConfig', config, this._hass);
  // existing code…
}

set hass(hass) {
  console.log('🌪️ hass setter, refreshCardConfigOnHass=', this.refreshCardConfigOnHass);
  // existing code…
}

render() {
  console.log('🌪️ render()');
  return html`…`;
}

update(changedProps) {
  console.log('🌪️ update()', changedProps);
  super.update(changedProps);
}

requestUpdate(name?, oldVal?, options?) {
  console.log(`🌪️ requestUpdate(${name})`);
  return super.requestUpdate(name, oldVal, options);
}

Reload, trigger a HA disconnect/reconnect, and watch which logs fire.

• If render() or requestUpdate() fires on every reconnect, that’s the trigger for full card redraw.

3.3. Narrow down the culprit call

Look through your methods for any of these patterns—each can force a full update:

• Calls to this.requestUpdate() outside of genuine data changes
• In refreshMeasurements(), doing this.requestUpdate() whenever refreshData() resolves
• Any re‑initialization in refreshCardConfig() (e.g. rebuilding SVG, re‑attaching DOM) on every reconnect
• Explicit calls like window.scrollTo(0,0) (not obvious here, but check third‑party helpers)

You’ll likely find that every reconnect calls set hass(...), sees this.refreshCardConfigOnHass===true, then invokes refreshCardConfig(), which tears down and re‑builds the SVG plus calls requestUpdate(). That full redraw of the <ha-card> is what kicks the browser’s scroll back to the top of your view.

3.4. Apply targeted fixes

1. Debounce or guard against unnecessary refreshCardConfig()

   set hass(hass: HomeAssistant) {
     const wasDisconnected = this._hass?.connection.connected === false;
     this._hass = hass;
     if (this.refreshCardConfigOnHass && wasDisconnected) {
       this.refreshCardConfigOnHass = false;
       this.refreshCardConfig();
     }
     // only update state and render graphs below, no full config refresh
     this.entityStateProcessor.updateHass(hass);
     if (this.entityStateProcessor.hasUpdates()) {
       this.windRoseDirigent.updateStateRender();
     }
   }

   – This way, you only rebuild the entire card once after the first time you get a config + hass, not on every reconnect.

2. Limit DOM updates to the SVG layer

   • Move your graph updating logic entirely into WindRoseDirigent so that renderGraphs() manipulates existing <svg> elements rather than calling requestUpdate() on the LitElement.
   • Remove the this.requestUpdate() inside refreshMeasurements(), or guard it so it only fires if absolutely needed.

3. Override shouldUpdate() to skip Lit’s render if only the _hass property changed but no visual config/state updates are needed:

   shouldUpdate(changedProps: PropertyValues) {
     if (changedProps.has('_hass') && !this.entityStateProcessor.hasUpdates()) {
       return false;
     }
     return super.shouldUpdate(changedProps);
   }

   citeturn2search1

4. As a last resort, restore scroll position by capturing it before update and resetting after:

   const scrollPos = window.scrollY;
   await this.updateComplete;
   window.scrollTo(0, scrollPos);

---

4. Recap

By isolating the card and instrumenting its lifecycle, you will see that every reconnect is tearing down and re‑building the entire <ha-card>. The fix is to:

• Prevent unnecessary full re‑renders on reconnect by tightening your hass setter and shouldUpdate().
• Keep incremental data updates confined to your SVG renderer instead of calling requestUpdate().
• Optionally restore scroll after updates if some redraw is unavoidable.

Applying these targeted changes will stop the unwanted “jump to top” behavior without sacrificing your live‑data updates.

[aukedejong]

You asked chatgpt, nice.
I did some tests with the info you posted here, also asked chatgpt some things.
But did not find a solution yet.

I'm reading about efficiency. I'm afraid HA or LitElement just removed the card from the DOM, because of the HTML size it takes.