SVG displaying problem with Firefox (after last udpate)

AmoebeLabs / swiss-army-knife-card

The versatile custom Swiss Army Knife card for Home Assistant allows you to create your unique visualization using several graphical tools, styling options and animations.

223 stars 19 forks source link

SVG displaying problem with Firefox (after last udpate) #215

Closed grichka49 closed 1 year ago

grichka49 commented 1 year ago

Bug report notice

SVG are cropped in Firefox. It seems to be OK with Chrome Animation (animated SVG) are not smooth. I seems to be OK with Chrome

[X ] Yes, I'm sure that it is not a configuration mistake

Swiss Army Knife version

The problem appears with last update v2.4.4 All was functional before update.

Bug description

Some part of SVG are not displayed

To Reproduce

Display the card with Firefox browser

Screenshots

Firefox

Chrome

Desktop browser (please complete the following information):

OS: Windows 11
Firefox 113.0.1

AmoebeLabs commented 1 year ago

Nice energy dashboard!

Try disabling SVG injection:

  options:
    svginjection: false     # true (default) for injection,
                            # false for keeping the external file

see: https://swiss-army-knife-card-manual.amoebelabs.com/tools/usersvg-tool/#styling-injected-vs-external-svgs

I will check firefox to see if I can find the problem FF has with injected SVGs.

jwaz73 commented 1 year ago

I'm having the same issue with FF (v113.0.1) on Windows 11. No issues with Chrome or Edge.

Where does the codeblock for disabling svgingection go? I tried it here with no change:

      - type: usersvg
      ...
        styles:
          usersvg:
            options:
              svginjection: false

AmoebeLabs commented 1 year ago

I'm having the same issue with FF (v113.0.1) on Windows 11. No issues with Chrome or Edge.

Where does the codeblock for disabling svgingection go? I tried it here with no change:
      - type: usersvg
      ...
        styles:
          usersvg:
            options:
              svginjection: false

On the same level as the styles. So:

  - type:
    options:
      svginjection: false
    styles:

AmoebeLabs commented 1 year ago

Yup, FF does weird things with some of the SVGs:

The first row shows a perfect AQI face. no clipping at all. I see that with more SVGs
The first row shows clipping for some reason for the pollen SVGs. The SVGs don't have any clipping/masking region defined
The second row shows NO clipping, other than the clipping/masking specified in the SAK card.

I must do more testing to find out what the problem is with FF when injecting SVGs. I have checked the CSS property overflow = visible, but that one is already defined as Safari needed that setting.

According to the inspector, FF does calculate the space for the SVG as it should:

The size of the actual SVG is also right:

This you can see from this image. They are identical:

So FF knows the exact - right - size of the SVG, but is clipping the image in some situations!

AmoebeLabs commented 1 year ago

FF seems to have a large history of clipping and masking problems if I browse the internet. That helped in understanding why Safari and Chromium (Chrome / Edge) render as expected, and FF not.

So, after some hours of experimenting and adapting the UserSVG tool, it works now in FF:

first card is without any clipping/masking specified, but uses injected SVG's
second card is using clipping/masking. AQI is an image, Tres and Grass are injected SVGs with some styling (Tres with a color invert filter, and Grass with opacity set to 0.5), and Weed is an external SVG (not injected).