search

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
161 stars 48 forks source link

MDI icons wrong size and position in Safari #47

Open slipx06 opened 1 year ago

slipx06 commented 1 year ago

There is an issue with the way Safari renders the foreignObject element which I use to display the mdi icons. This affects their position and size. I don't know how to fix this so for now the work around is to use another browser or use the built in icon presets.

Pho3niX90 commented 7 months ago

@slipx06 is this only happening for safari? Any other browsers like brave, firefox etc? I don't own apple products so cannot reproduce

slipx06 commented 7 months ago

@Pho3niX90 only seems to be a problem with Safari

https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari https://discussions.apple.com/thread/254680843

Pho3niX90 commented 7 months ago

@slipx06 it seems this might be related to safari 16.3? https://discussions.apple.com/thread/254680843

Pho3niX90 commented 7 months ago

I will see if I can maybe emulate safari

finch6 commented 7 months ago

Im on Safari 16.6.1 and the Card looks good to me? But maybe my config doesn't have a lot of icons for it to be a "mess"?

Screenshot 2023-11-14 at 08 12 17

Happy to try a config that someone is having an issue with and see if its fine in 16.6.1?

slipx06 commented 7 months ago

Thanks. It only becomes a problem if you are using mdi icons in the card. In other words load1_icon: mdi: example etc

I think there must be a better way of rendering the icon inside the SVG. I'll also take another look

lamixer commented 7 months ago

Maybe all webkit, not just Safari. I get the same problem when using the HomeAssistant 'app' on a Mac. Looks just like in Firefox, except the icon for the EV charger is small!

(screenshot from Safari)

in_safari