Bubbles not showing randomly

[tigers75]

It happens quite often that the bubbles disappear (I think they become very very small in fact), like in this image:

This happens ALWAYS while and right after modifying the card, and is resolved by a forced refresh with CTRL+F5, but also randomly happens upon re-entering the android app (that was left open); this time to fix it I have to close and reopen the app. After a while simply re-entering the app fixes it. I don't know if I'm doing anything wrong.

[matteofranceschini]

I have the same problem, usually it fixes itself after a page refresh, also with the app (at least, for me!).

I might add this issue, also, with firefox:

I don't see any issue, instead, with safari:

It just happens sometimes, and it seems to depend on the values of the sensors: it does not solve itself by refreshing nor deleting the cache.

[sebrep]

Yeah I know this is sometimes an issue on mobile and one needs to refresh, but I never heard of it being stuck that way. The issue is about HA giving the card the actual width. It seems that behavior is unconsistent and leads to this issue. I'm dreaming of finding the time to recreate the whole card not with pixel based SVGs like now but with a range of css animations, this would make the card better, reliable and a lot better performing. But I don't find the time.

[tomlut]

This is what it looks like on firefox 91.0.1 (64bit):

Chrome seems ok:

EDIT: actually it looks ok once the edit mode is closed and a browser refresh is done:

[reptilex]

Yes this is a big issue that is linked to using the size of the card to calculate the bubbles size, sometimes it is not given by HA and I get this ugly view. It disappears on reload and I thought of changing to css animation to avoid this. But it seems that goal is far away with my current workload

[tomlut]

Eh, a page refresh isn't that onerous. Still a great card!

Thank you.

[Avatar1976]

Just a thought instead of relying on home assistant to provide real values perhaps instead choose minimum size values and rely on home assistant data only if they exceed those values?

[samuelolteanu]

Can confirm this bug. It always fails to render on after mobile screen rotation.

[reptilex]

@Avatar1976 I tried that but it only looks a bit better since the height does not fit, the icons get separated and the lines don't match.

[tomlut]

This seems to have become worse even on the desktop, to the point where I'm considering removing the card. I do appreciate all the work you have done to gift us this card (seriously, thank you) but I just don't find it reliable enough.

[reptilex]

I'm working on the solution, still having to fix a lot of bugs and too much work currently, but you can check the branch 3moreAppliances to get an idea how it would work, if you are not a coder I don't think I have anything ready yet, but here is a buggy version that can be used to replace the card in HA manually. Careful: BUGGY and probably broken tesla-style-solar-power-card.js.zip

[pbasista]

Hi, in my case the lines are detached from the bubbles:

This can be reproduced in Firefox or Chrome, as well as in the Android mobile application. Refreshing or resizing the page sometimes fixes the layout but not always. It seems like it might be caused by some rounding issue, i.e. the card's size or aspect ratio is calculated to a certain precision and when it turns out to be under or over some threshold, then the lines are shifted by a large amount, resulting in incorrect layout.

I have also tried the JavaScript file from the mentioned 3moreAppliances branch. But the behavior with respect to the lines being detached from the bubbles was roughly the same.