Guides
Troubleshooting
Nothing shows up? A checklist of the usual causes with how to confirm each one, from the season window to content blockers.
Work through the list from the top. The first one is the cause most of the time.
1. It is outside the season#
The default window is 18 October to 2 November. Outside it nothing shows, by design. To test, set a window that includes today with the season attributes, then remove the override before you publish.
2. The master class is missing#
Open the browser console on your site and run:
document.body.classList.contains("halloween")
It must return true. Without the class the library does nothing. See
master switch.
3. The script is not loaded#
In the network panel look for halloween.iife.js and check it loaded with
status 200. A content blocker, an ad blocker or a Content Security Policy can stop a
script from a CDN. Also check that you are looking at the live site and not at an
editor preview, because many site builders do not run custom code in the editor.
4. Reduced motion is on#
If your system asks for reduced motion, the ambient effects are not created. Only the screen-corner webs and the badge appear. Check your operating system setting. See accessibility.
5. The date values are wrong#
Wrong date values do not turn the library off. They make it run all the time, because
malformed values fail open. If effects appear on the wrong days, check every
data-halloween-start, data-halloween-end,
?s= and ?e= value for the DD-MM format.
6. You see a cached page#
Reload without cache, or open the site in a private window. Check that the snippet is on the live page and not only in a draft.
7. The effects are hidden behind something#
The effects layer is at z-index: 999. A fixed header or a modal with a
higher z-index covers it. Raise --halloween-page-z-index to move the
effects above it, or lower it to move them below.
8. The styles are blocked#
The library adds a <style> element with the id
halloween-styles. A strict Content Security Policy that forbids inline
styles blocks style elements added by scripts, unless it allows them with a nonce or
'unsafe-inline'. If the element is missing from
<head>, check the console for policy errors.
9. A different version loads#
Pin an exact version in the script URL. See installation.
Still stuck#
Open an issue on
GitHub
with the page URL, the classes on <body> and what the console says.