dark_mode.css has invalid size units for svg in Safari

[Christian Wiegand]

In django admin the javascript console shows some error messages

Error: Invalid value for <svg> attribute width="1.5rem"

This ist caused by an invalid size unit "1.5rem" in the django/contrib/admin/static/admin/css/dark_mode.css:

.theme-toggle svg {
    vertical-align: middle;
    height: 1.5rem;
    width: 1.5rem;
    display: none;
}

According to the specs svg doesn't allow "rem" as a valid unit (although some browsers will set the correct size).

[Christian Wiegand]

Not sure, if this is a problem only in Safari browser. Thought about providing a pull request to fix the issue, but there's maybe more of it behind, that I'm not aware of. So let me know, if a PR is welcome or otherwise we can just close this.

[Natalia Bidart]

Hello Christian Wiegand, thank you for your ticket. I have tried with Firefox and Chrome, and I don't get any errors in the Javascript console. Could you please provide extra information, specifically a way to reliable reproduce? Thank you!

[Christian Wiegand]

Hi Natalia, thanks for looking into that. The issue is easy to reproduce as long you have access to a Mac computer. I'm observing this issue since about 1.5 to two years.

If you open any Django App in Safari, goto Django admin and open the javascript console. It shows the error messages described above, no conditions. It's always there in the admin since the dark mode was introduced for Django admin. I attached an image of the javascript console to the issue.

The error messages are gone as soon as I replace the "1.5rem" size units with "24px" in the above quoted css code. Thought about providing a PR but then I read some articles that this maybe an error in Safari. Although there are hints around the net that generally SVG doesn't support "rem" or "em" units (since the dimensions in svg are a little more complex). As far as I learned SVG can only be sized in rem via the font-size css statement (and yes, I'm now 64 and retired, so my knowledge on svg graphics maybe stale ;-)). At least stated here: ​https://stackoverflow.com/questions/10325070/svg-translate-with-em-as-unit and here: ​https://www.w3.org/TR/SVG/coords.html#Units.

Anyway, I would be able to stand the error messages, so nothing really critical. Even if not being fixed, it would be nice to document here, so any other people worrying about the messages can follow the arguments.

Thanks, Christian

[Natalia Bidart]

Thank you Christian, other users using Safari have been able to reproduce. Accepting on that basis.

[Fabian Braun]

Besides within the CSS, the width="1.5rem" etc. are part of the base.html template. The current patch does not remove the error messages on the Safari console for me when testing locally. Can you take a look at those, too?

​https://github.com/AhmedNassar7/django/blob/b6a84ebe4e2329b453ddd106b7dbfcf25711a613/django/contrib/admin/templates/admin/base.html#L118-L122

[Sarah Boyce <42296566+sarahboyce@…>]

In fbdbccf2:

Fixed #36312 -- Removed invalid size units for svg in Safari.