slipx06 / sunsynk-power-flow-card

⚡A customizable Home Assistant card to emulate the Sunsynk System flow that's displayed on the Inverter screen.
MIT License
180 stars 52 forks source link

Strange corruption on macOS Safari #512

Open quentinsf opened 4 days ago

quentinsf commented 4 days ago

Is there an existing issue for this?

Current Behavior

Anybody seen strange corruption like this on Safari?

Screenshot 2024-09-14 at 18 59 11

It seems to be a problem parsing some of the SVG - I'm getting console errors like:

Error: Invalid value for <svg> attribute y="t=>xn.handlePopup(t,e.entities.grid_connected_status_194)"

It works fine on other browsers on the same machine, and in the HA app, and in Safari on my iOS devices.

However, I do see the same thing on two different Macs, running slightly different versions of Safari and very different versions of macOS. So it's not just my one individual machine, and I've tried flushing caches, reloading resources etc.

This started when I updated Home Assistant to 2024.9.1 and the Sunsynk card to v4.44.0 at the same time, so I'm afraid I can't tell which was responsible. My guess is that the SVG parser on macOS Safari may be fussier than some others, and there's a closed quote missing or something.

It may, of course, be something about my config, so I'm curious to know if others are running the latest version successfully on macOS Safari?

Steps To Reproduce

e.g. in Safari 16.6 on macOS Ventura, load a page with the Sunsynk card

Expected behaviour

I've been seeing a lovely card up until this latest update.

Card Version

v4.44.0

Home Assistant Version

2024.9.1

Configuration

No response

Relevant log output

[Error] Error: Invalid value for <svg> attribute y="t=>xn.handlePopup(t,e.entities.grid_connected_status_194)"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Problem parsing d="3.37875"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Invalid value for <svg> attribute y="t=>xn.handlePopup(t,e.entities.grid_connected_status_194)"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Problem parsing d="96"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Invalid value for <svg> attribute y="t=>xn.handlePopup(t,e.entities.grid_connected_status_194)"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Problem parsing d="3.380625"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Invalid value for <svg> attribute y="t=>xn.handlePopup(t,e.entities.grid_connected_status_194)"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Problem parsing d="94"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
[Error] Error: Invalid value for <svg> attribute y="t=>xn.handlePopup(t,e.entities.grid_connected_status_194)"
    j (sunsynk-power-flow-card.js:24:5992)
    _$AI (sunsynk-power-flow-card.js:24:5911)
    p (sunsynk-power-flow-card.js:24:3620)
    $ (sunsynk-power-flow-card.js:24:4679)
    _$AI (sunsynk-power-flow-card.js:24:4176)
    (anonymous function) (app.wNoxo8Q30IA.js:2:352642)
    (anonymous function) (sunsynk-power-flow-card.js:30:512)
    update (sunsynk-power-flow-card.js:30:519)
    performUpdate (sunsynk-power-flow-card.js:12:5142)
    (anonymous function) (sunsynk-power-flow-card.js:12:4594)
itsgucci commented 4 days ago

I am experiencing the same issue of the icons not showing up, but mine is running in the macos Home Assistant app and not through a browser.

Screenshot 2024-09-14 at 11 53 00 AM

It does work if I go into edit the cards, and select lite version. (I am using the full) until I quit and relaunch the app, then the lite will be corrupted, and I can select the full, which works until I quit the app.

Screenshot 2024-09-14 at 11 56 59 AM Screenshot 2024-09-14 at 11 56 48 AM Screenshot 2024-09-14 at 11 56 41 AM

So it seems it is there when first selected, but after relaunching something fails.

Screenshot 2024-09-14 at 12 00 54 PM

macos sonoma 14.6.1 card v4.44.0

slipx06 commented 3 days ago

Hi

Unfortunately a know issue with dynamic css and styles and what HA considers to be a legacy browser. See https://github.com/slipx06/sunsynk-power-flow-card/issues/500

You can revert back to 2024.7.4 or upgrade your device/browser

quentinsf commented 3 days ago

Unfortunately a know issue with dynamic css and styles and what HA considers to be a legacy browser. See #500

Ah, but my Safari is the latest version and way newer than anything labelled ‘legacy’ there.