MDI icons wrong size and position in Safari

[slipx06]

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]

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

[slipx06]

@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]

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

[Pho3niX90]

I will see if I can maybe emulate safari

[finch6]

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"?

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

[slipx06]

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]

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)