Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not using SVGs due to missing Modernizr class #173

Closed
stroebjo opened this issue Feb 5, 2024 · 1 comment · Fixed by #174
Closed

Not using SVGs due to missing Modernizr class #173

stroebjo opened this issue Feb 5, 2024 · 1 comment · Fixed by #174
Labels
bug

Comments

@stroebjo
Copy link
Contributor

stroebjo commented Feb 5, 2024 •
edited
Loading

The logos in the header and footer (and possible more images?) use a PNG and not the corresponding SVG file, since it is behind the Modernizr feature detection and depends on the html.mdzr-svg class being present.

On high DPI screens the difference is visible from to the main djangoproject.com website.

The CSS file trac-env/htdocs/css/output.css seems to be reused from the main project, since the main site includes a modernizr.js the SVGs are used there.

Since SVG CSS backgrounds should be available anywhere I think the easiest solution would be to just add the mdzr-svg class to the html element, or include the modernizr.js from the main project as well if it is still needed.
@bmispelon bmispelon added the bug label Feb 5, 2024
@bmispelon
Copy link
Member

Thanks for the report! ✨

I removed modernizr in 43d9616 because I was under the impression that it wasn't used anymore, but it seems I was wrong.

We already have a hack to manually add a css class to the <body> (see https://github.com/django/code.djangoproject.com/blob/main/trac-env/templates/django_theme.html#L86), so I think at this point the correct fix is probably to re-add the library and get rid of the hack.

Would you like to try to submit a PR for it? I'd be happy to assist you if you'd like. Otherwise I'll probably pick this issue up later in the week.

stroebjo added a commit to stroebjo/code.djangoproject.com that referenced this issue Feb 5, 2024
@stroebjo
add modernizr svg class manually to utilize SVGs in CSS django#173
858cbb3 
Modernizr JavaScript library was removed in 43d9616 due to the fact that the CSS class `mdzr-svg` is missing from the markup and the SVG images defined in the output.css are no longer used. This leads to visual regression compared to other parts of the djangoproject.com website on high-dpi devices (blurry images), i.e. header/footer logos.

Other Modernizr classes used in code.djangoproject.com seem to be `.mdzr-borderradius`, `.mdzr-cssanimations` but those appear only in the output.css and seem to be used on the djangoproject.com home page and not here. `.mdzr-no-borderradius` is used as well, but that seems irrelevant, since all browsers should support border-radius.
@bmispelon bmispelon linked a pull request Feb 6, 2024 that will close this issue
add modernizr svg class manually to utilize SVGs in CSS #173 #174
Merged
bmispelon pushed a commit that referenced this issue Feb 6, 2024
@stroebjo
Fixed pixelated logos on high DPI screens
1a366c8 
Turns out that the CSS (output.css in that case) was relying on more modernizr classes (which was removed in 43d9616).

The logos in particular use a modernizr class to determine whether to use an SVG or a PNG, leading to pixelated images on high resolution screens.

Fixes #173
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

add modernizr svg class manually to utilize SVGs in CSS #173 stroebjo/code.djangoproject.com
2 participants
@bmispelon @stroebjo