Dice Roller Tool – Troubleshooting & Common Issues
1️⃣ Roll Button Not Working
If clicking the Roll button does nothing:
✔ Ensure JavaScript is enabled.
✔ Refresh the page (Ctrl + F5).
✔ Clear browser cache in case old scripts are still loading.
This usually happens if your browser cached older JS files.
2️⃣ Dice Animation Not Playing
✔ Make sure the CSS animation classes (`dice-rolling`) are applied correctly.
✔ Verify no CSS framework is overriding `animation`, `transition`, or `transform`.
✔ Safari users may require `-webkit-transform-style: preserve-3d;`.
3️⃣ Dice Not Showing Final Value
✔ Ensure the JS updates the final value after the animation completes.
✔ Confirm you use `setTimeout` for timing the final reveal.
✔ Check the DOM element IDs: `.dice-face` and `.dice-result`.
4️⃣ Dice Faces Not Displaying Correctly
✔ If using images, verify all face images are in the correct folder.
✔ If using CSS faces, ensure `display:grid` or `flex` is properly applied.
✔ Check scaling CSS on small screens.
5️⃣ Confetti Not Showing on Special Rolls
✔ Confirm `window.confetti` is loaded before calling it.
✔ Check your special-condition function: triggerSpecialConfetti().
✔ Use HTTPS to avoid blocking confetti script resources.
6️⃣ Sound Not Working
✔ Most browsers block audio until user interaction.
✔ Ensure the roll button plays sound only after a user click.
✔ Test with different formats (.mp3 / .wav).
7️⃣ Tool Looks Broken on Mobile
✔ Make sure dice size is responsive (e.g., `width: clamp(60px, 8vw, 120px)`).
✔ Allow enough padding so bouncing animation isn't cut off.
✔ Verify the page includes ``.
8️⃣ Page Feels Slow or Laggy
✔ Too many dice (8–10) can cause rendering lag on small phones.
✔ Reduce animation duration slightly.
✔ Avoid loading heavy external JS libraries.