SVG <rect> changes size in Chrome

[tlrobinson]

If you have an SVG element with width and height attributes (not style) it seems Chrome reports the computed width and height as auto, which overrides the attributes when using computed-style-to-inline-style

Demo: https://jsfiddle.net/uqL9hxnk/1/

This doesn't happen in Safari or Firefox, so maybe it's a bug in Chrome. It would be nice if computed-style-to-inline-style worked around it though.

[tlrobinson]

The following workaround works in my case:

for (const attribute of ["width", "height"]) {
    for (const rect of element.querySelectorAll(`svg [${attribute}]`)) {
        rect.style[attribute] = "";
    }
}