SVG sizing in rem units causes error in Safari

[OrionReed]

What package has an issue

@mantine/core

Describe the bug

When width/height of SVGs is set using rem units, this causes an error in Safari 16.3 (current) and below. rem units in SVGs are part of the SVG2 spec (afaik still active but in draft) but are supported by most browsers and render properly. However, the the errors do produce a ton of clutter.

This is okay for my own components if I have control over SVG sizing where I can do something like size={px(1rem)} but for components like Loader this does not work as a solution.

What version of @mantine/hooks page do you have in package.json?

6.0.13

Do you know how to fix the issue

No

[vvalchev]

Same for Firefox 114.0.2 on MacOs.

It renders messages like:

Unexpected value 0.875rem parsing width attribute.

But it seems, that the 'rem' size is in many places.

As example for me, the above message occurred, when I used nested NavLink elements. I added the following attribute to NavLink to remove the warning in the console:

          rightSection={
            <ChevronIcon width="16px" height="16px" style={{ transform: 'rotate(-90deg)' }} />
          }

But this happened in other components either.

[rtivital]

Duplicate of #3699