[Django] #36312: dark_mode.css has invalid size units for svg

[Django]

#36312: dark_mode.css has invalid size units for svg
---------------------------------------------+---------------------------
Reporter: Christian Wiegand | Owner: cwiegand
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Keywords: admin css
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 1
UI/UX: 0 |
---------------------------------------------+---------------------------
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).
--
Ticket URL: <https://code.djangoproject.com/ticket/36312>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36312: dark_mode.css has invalid size units for svg

-----------------------------------+--------------------------------------

Reporter: Christian Wiegand | Owner: cwiegand
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2

Severity: Normal | Resolution:

Keywords: admin css | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0

-----------------------------------+--------------------------------------
Comment (by 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/36312#comment:1>

[Django]

#36312: dark_mode.css has invalid size units for svg
-----------------------------------+--------------------------------------
Reporter: Christian Wiegand | Owner: cwiegand

Type: Bug | Status: closed
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution: needsinfo

Keywords: admin css | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 0
-----------------------------------+--------------------------------------
Changes (by Natalia Bidart):

* easy: 1 => 0
* resolution: => needsinfo
* status: assigned => closed

Comment:

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!
--
Ticket URL: <https://code.djangoproject.com/ticket/36312#comment:2>

[Django]

#36312: dark_mode.css has invalid size units for svg
-----------------------------------+--------------------------------------
Reporter: Christian Wiegand | Owner: cwiegand
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution: needsinfo
Keywords: admin css | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-----------------------------------+--------------------------------------

Changes (by Christian Wiegand):

* Attachment "Bildschirmfoto 2025-04-10 um 19.46.13.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/36312>

[Django]

#36312: dark_mode.css has invalid size units for svg
-----------------------------------+--------------------------------------
Reporter: Christian Wiegand | Owner: cwiegand
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution: needsinfo
Keywords: admin css | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-----------------------------------+--------------------------------------

Comment (by 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.

Thans, Christian
--
Ticket URL: <https://code.djangoproject.com/ticket/36312#comment:3>

[Django]

#36312: dark_mode.css has invalid size units for svg

--------------------------------------+------------------------------------

Reporter: Christian Wiegand | Owner: cwiegand

Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: admin css | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

--------------------------------------+------------------------------------
Changes (by Natalia Bidart):

* resolution: needsinfo =>
* stage: Unreviewed => Accepted
* status: closed => new
* type: Bug => Cleanup/optimization
* version: 5.2 => dev

Comment:

Thank you Christian, other users using Safari have been able to reproduce.
Accepting on that basis.
--
Ticket URL: <https://code.djangoproject.com/ticket/36312#comment:4>