search

jazzband / django-debug-toolbar

A configurable set of panels that display various debug information about the current request/response.
https://django-debug-toolbar.readthedocs.io/
BSD 3-Clause "New" or "Revised" License
7.97k stars 1.03k forks source link

SVG definitions have width in rem which throws console errors #1935

Open michjnich opened 1 week ago

michjnich commented 1 week ago

The problematic definitions are in this file: https://github.com/jazzband/django-debug-toolbar/blob/0a622dcab4c78ce0f1d339f0e3147a1023350efa/debug_toolbar/templates/debug_toolbar/includes/theme_selector.html#L5

As I understand it, SVGs cannot define height in em or rem, but require pixels.

The current status results in errors in the console on Firefox stating "Unexpected value 1rem parsing width attribute." - 6 errors in total, one for each SVG definition.

Tested on Edge too and that does not seem to produce the errors, so this looks to be browser dependent. Looking at similar issues on other repos, I suspect Safari would also show them, but I am not using apple so cannot verify this.

Happy to make the change and submit a PR if somebody can say which pixel size they would need.

tim-schilling commented 1 week ago

I'm not able to reproduce this with Firefox 126.0.1 or 127.0.1 on a mac

tim-schilling commented 1 week ago

I was able to reproduce on Safari.

A PR would be greatly appreciated. I don't think we should use pixels as that breaks the scalability. I think you could wrap the svg in an element that uses the CSS style of width: 1rem; height: 1rem;, then remove the width and height attributes from the svg element. You'll need to play around with how to get it to appear properly though, but that will handle the sizing issue.