Icon rendering problem in svg foreignObject since hass >= 0.110: icon "shifts" down vertically depending on zoom level & browser

[AmoebeLabs]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

The problem

As of hass 0.110 the rendering of mdc icons have changed. You have to add --mdc-icon-size": '100%;' to the css to get the icon rendered correctly within its parent.

However, I now have problems when zooming in: for some reason the vertical size of the div changes. As a result the icon shifts downward (is centered), and gets clipped by the parent.

Screenshot @300% zoom in Chrome of hass 0.98:

Screenshot @300% zoom in Chrome of hass 0.115.6 (ignore the second set of icons, just for testing):

On the mobile side: IOS 14 clips most of the icons when initially rendered.

This is the formatting:

The foreignObject:

And the weird height of the div:

...causing the icon to be clipped.

I can't find WHY the height of the div becomes larger when zooming in!

Expected behavior

Icons are rendered within the foreignObject.

Zoom @100%:
foreignObject:

div:

Steps to reproduce

N/A

Environment

• Home Assistant release with the issue: 0.98 and 0.115.6
• Last working Home Assistant release (if known): < 0.110
• Browser and browser version: Chrome / Safari
• Operating system: Windows / iPad OS

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[bramkragten]

This is not something we support, but I'm willing to take a quick look if you can provide me a simple replication.

[AmoebeLabs]

That's nice, I'm happy with all the support/help I can get, as this worked in 0.98 and I have absolutely no clue why the div container gets stretched in the y-axis, causing the icon to get shifted down, as it is centered in the div.

I will take some time to create a simple example to replicate the problem and report back.

[AmoebeLabs]

Sorry, was commenting in wrong issue...

I see now that the height of the div in 0.115 is determined by:

And the rest of the computed values:

And guess what changes while changing the zoom level in Chrome!!!!

TLDR: Vertical size of div equals:
100% = 20px
150% = 30px
200% = 40px
250% = 50px
300% = 60px
400% = 80px

In hass 0.98, there is no such thing as a line-height defined for that div:

[AmoebeLabs]

Yep!

If I remove the line-height using the Chrome inspector, Icons are directly displayed correctly!!

So where is this coming from??

[bramkragten]

That's a global style. You can overrule it though by setting it yourself.

[AmoebeLabs]

Ah!

After some fiddling with syntax the svg rendering works!

return svg`
  <foreignObject width="${this.dimensions.iconSize}em" height="${this.dimensions.iconSize}em" x="${this.coords.xpx}" y="${this.coords.ypx}">
    <div class="div__icon" xmlns="http://www.w3.org/1999/xhtml"
        style="line-height:${this.dimensions.iconSize}em;">
      <ha-icon .icon=${icon} style="${configStyleStr}"></ha-icon>
    </div>
  </foreignObject>
  `;		

Me happy! Issue solved & closed.

So this change in global style is something that is inherited somehow by hass using newer libs orso?