id="cookies" causes browser weirdness
deeprave opened this issue · 7 comments
Something I noticed in joining up to Jazzband - I had some issues with the join form. Originally I thought it a Safari thing (my browser of choice, though I realise it has its shortfalls) but the same thing happens with Google Chrome. Not sure where I need to file a bug report on this so stating it here for now.
Using the id "cookies" is what seems to break the page. Some of the graphics and styles no longer render, and there is no checkbox on the cookies "I consent" item, so the form is impossible to complete as is. To work around this, I used chrome dev tools and edited the id value but left the name attribute as "cookies" at which point the checkbox appeared, and I could successfully submit the form. This is a mysterious bug, especially since "cookie" is used in headers & DOM, not the plural.
Here's a screenshot of what the form looks like with the "<input id="cookies" .." element present:
A fix looks easy enough, just renaming the field in both:
jazzband/templates/account/consent.html
and
jazzband/account/forms.py
Unless I am missing something database related that should be it? I will submit PR if nothing more is required.
Fascinating, do you have an ad blocker extension installed or something like Pi-Hole running by any chance?
This is what it looks like with Safari for me:
Ah yes, Adblock was the hero involved, nice spot. Interesting that it filters id="cookies" at all. I'll contact them about it.
With Adblock disabled, the checkbox now works but style sheet still fails to load for me, with the following error in the JS console.
"Did not parse stylesheet at 'https://jazzband.co/static/dist/styles.css' because non CSS MIME types are not allowed in strict mode."
I can't see an issue with the stylesheet link element, which has a type="text/css" attribute.
Safari 14.0 (14610.1.28.1.9)
Just to add that styles on this page seem to be still an issue. On google chrome I get a similar message to safari:
Refused to apply style from 'https://jazzband.co/account/consent' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This appears to be a server-side issue. The request has the header "Accept: text/css,./" but the response has "content-type: text/html" even though it is in fact a stylesheet.