Countdown Timer works on Android and PC but not IOS

Shopify Discussion

Topic summary

A Shopify store owner reports a countdown timer displaying “NaN” error on iOS devices while functioning correctly on Android and desktop browsers. Screenshots confirm the cross-platform inconsistency.

Troubleshooting attempts:

  • Initial suggestion to wrap the script in a DOMContentLoaded event listener didn’t resolve the issue
  • Testing on multiple physical iPhones (iPhone 14 and others) consistently reproduced the error
  • One responder tested on iPhone 11, 11 Pro, and 12 without encountering problems, suggesting potential device-specific or inspection tool differences

Root cause identified:
The issue stems from date string parsing inconsistencies across browsers. The code uses new Date('{{ section.settings.custom_liquid }} 00:00:00'), but iOS Safari parses date strings differently than other browsers.

Proposed solution:
Reformat the date string to the ISO 8601 standard (yyyy-mm-ddThh:mm:ss.sssZ), which is universally recognized across all browsers. Adding “.000” to the time format should resolve the parsing issue and eliminate the NaN error on iOS devices.

Additional note: There’s a mismatch between using countdown as a class in HTML while attempting to retrieve it by ID in the script.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
3

I tried adding the script and viewed again on my iPhone14 device but still has that error.

What iOS phone are you using?