Coin Toss Tool – Troubleshooting & Common Issues
1️⃣ Toss Button Not Working
If clicking the Toss button does nothing:
✔ Ensure JavaScript is enabled in your browser.
✔ Refresh the page (Ctrl + F5).
✔ Clear cache if the old script is still loading.
The issue usually occurs when cached JS conflicts with updated code.
2️⃣ Clicking the Coin Does Not Toss
This happens when the `onclick` event isn't bound properly.
✔ Make sure script is loaded after the coin HTML.
✔ Ensure the element ID is correct: id="coin".
3️⃣ Coin Animation Not Playing
✔ Check that your CSS includes the full 3D flip animation.
✔ Ensure no other CSS framework overrides `transform` or `animation` settings.
✔ Safari users may need `-webkit-backface-visibility: hidden;`.
4️⃣ Coin Not Showing Heads/Tails
✔ The text might blend with the gold background.
✔ Adjust CSS: add text-shadow or high-contrast color (white/black).
✔ Ensure `.coin-face` has proper `z-index`.
5️⃣ Coin Spins Too Fast or Too Slow
✔ Modify animation duration in CSS: animation: flipCoin 1.4s ease-in-out;
✔ Lower values = faster spin, higher = slower.
6️⃣ Results Not Showing / Incorrect
✔ Ensure the JS result update function runs after the coin flips.
✔ Confirm variable currentSide is updated correctly.
✔ If using localStorage, clear old records.
7️⃣ Tool Looks Broken on Mobile
✔ Use responsive CSS for the coin size.
✔ Ensure viewport meta tag exists.
✔ Some devices need higher `perspective` for 3D animations.
8️⃣ Page Loads Slowly
✔ Optimize coin images if you're using images instead of CSS.
✔ Avoid loading unnecessary external libraries.
✔ Minify JS and CSS in production.