Show HN: I made CSS-only glitch effect
muffinman.ioDoesn't work on Android DDG and FF on th site, but works in both on CodePen.
That is weird, because it is HTML/CSS only. Do you see anything that would help me debug it? Could it be that an add-on (content blocker) messes up with it? I don't have an android device to test. I don't see any issues on desktop and ios though.
Quite amusingly:
site glitch doesn't work on the desktop FF too, not in any of three, with various staleness but nothing too old
works on the CodePen, but if I replace CSS there with the response of glitch.css from the Network tab - it blanks and never shows anything
no ad-blockers, no errors while loading
Thanks for checking, I’ll try to see what is going on.
Shoulda checked it in the first place:
FF 138.0.1 (May 1, 2025)GET https://muffinman.io/js/posts/glitch/parser.js [HTTP/1.1 200 OK 138ms] Uncaught TypeError: animation is undefined parse https://muffinman.io/js/posts/glitch/parser.js:263 Monorail https://muffinman.io/js/posts/glitch/monorail.js:327 <anonymous> https://muffinman.io/js/posts/glitch/index.js:10 <anonymous> https://muffinman.io/js/posts/glitch/index.js:5I've figured it out. The error means that this call fails:
As Firefox supports `getAnimations` since 2020, I figured something else is messing up with it. I've tried to enable "reduced motion" in the system settings and it broke the animation!const animation = animationElement.getAnimations()[0];It is because I had force-disabled all animations on the site when this option is enabled.
I patched it, it should work now. Thank you for your help!
EDIT: typo
EDIT2: I also added simple error handling to display a message if parsing the animation fails.
Yep, works on DDG/A, FF/Win64 now!
Works for me on the site, FF Android
works for me in android DDG
That's truly impressive, never have seen sth like that before with CSS
This CSS glitch effect is so dope! Makes me wanna try it on my own website.
Go for it, and share a link!
Very interesting and beautiful effect!
Nice!
super cool!