Missing mobile menu icons on CAPE and Scorecards – spaces being stripped from inline SVG data URIs, in CSS

[zarino]

I noticed a while ago, the mobile menu icon was missing from the top right corner of the Scorecards site:

I assumed it was either a network error at my end, or a temporary caching thing.

Today I noticed it was missing on CAPE too:

And on thinking closer about it, I realised this menu icon (three horizontal lines) is implemented as an SVG, URL-encoded into a Data URI, inside a background-image: rule in the site’s CSS … so it couldn’t be an issue with a missing image file or whatever.

Inspecting the CSS sent to my browser, I can see the rule:

.navbar-dark .navbar-toggler-icon {
 background-image:url("data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'width='30'height='30'viewBox='003030'%3e%3cpathstroke='%23fff'stroke-linecap='round'stroke-miterlimit='10'stroke-width='2'd='M47h22M415h22M423h22'/%3e%3c/svg%3e")
}

Compare to the same rule, when I visit the site running locally in a Docker container:

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

Aside from the handling of the final } (which is interesting – it suggests the formatting/minification settings are different in the docker and live environments) the big problem, the one causing the missing lines in the screenshots above, is that all of the spaces have been stripped from the Data URI, resulting in an SVG that starts with <svgxmlns. Since this isn’t a valid SVG start tag, the browser ignores the image.

@sagepe any idea what might be stripping the spaces out of this Data URI?

[sagepe]

So the string svgxmlns occurs several times in the generated CSS files on the app server instance - so I think this is something Django Pipeline has done and then a quick Google threw up this: https://github.com/jazzband/django-pipeline/issues/743 which looks at a glance to be the same problem (although I've not dug into this much more yet).

[sagepe]

Noting also that we use csscompressor and this looks relevant: https://github.com/sprymix/csscompressor/issues/9 - so this looks like it could well be the underlying compressor - csscompressor is supposed to be an exact port of YUI, and the pipeline issue mentioning this uses yuglify, so potentially related?

[zarino]

For a bit more context, judging by Wayback Machine snapshots of the CAPE CSS file, svg xmlns was replaced by svgxmlns some time between 15th February 2022 and 3rd March 2022. Coincidentally we also started cache busting at the same time – https://github.com/mysociety/caps/commit/b8824a61a207debaecc363007e4a27fcc77756d8 – related?