SVG icon is stretched in notifications

[anselmbradford]

Visit https://cfpb.github.io/capital-framework/components/cf-notifications/ and look at the error notification and see that the icon is stretched slightly tall.

[jimmynotjim]

Looks square again.

[anselmbradford]

It appears to depend on the browser window size. It's correct at smaller sizes, but not desktop. Also 👋 Jimmy:

[jimmynotjim]

👋

Double check what you're inspecting in those screenshots, one is the svg and one is the path within the svg. The svg itself is expected to be taller than it is wide, because the canvas matches the canvas of Avenir and the icon is set within that canvas to align it to the text.

Unfortunately I'm now seeing in my screen shot the icon is actually breaking outside the overlay box but your small screen screenshot doesn't look like it's doing that. Very weird.

[anselmbradford]

Double check what you're inspecting in those screenshots, one is the svg and one is the path within the svg. The svg itself is expected to be taller than it is wide, because the canvas matches the canvas of Avenir and the icon is set within that canvas to align it to the text.

Ah good catch, yup path reports a square, but visually it's stretched:

[Scotchester]

This seems to be different between browsers, too. In FF, it doesn't look stretched, but the left and right edges of the circle are slightly cut off.

In Chrome, it seems to be a rounding issue. I see the stretching as screenshotted above, but if I increase the font-size rule that controls the size of the icon, the problem goes away.

[anselmbradford]

Tab icons are stretched here too https://www.consumerfinance.gov/owning-a-home/closing-disclosure/