Search code examples
javascriptsafarisvelteios12astrojs

Asto SSR generated code doesn't run on older versions of iOS

I am hosting astro SSR site on Netlify. It works well everywhere except when I test on iPhone 6 and older. Basically all script executions are stopped and the site is no longer interactive.

Errors from Safari on iPhone 5SE Simulator:

[Error] SyntaxError: Unexpected token '.'

[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored. (x2)

[Error] Unhandled Promise Rejection: SyntaxError: Unexpected token '?'

[Error] Unhandled Promise Rejection: SyntaxError: Unexpected token '?'

enter image description here

enter image description here

I am not really sure how to fix this issue. Any help would be appreciated.

PS: I used svelte for building astro islands and google recaptcha(v3) in the page that is being tested. The page works fine on development environment.

Solution

  • This sounds like you have some code using optional chaining, e.g. object?.potentiallyMissingProperty. Per caniuse, this only works on iOS Safari versions 13.4 and later. An iPhone 6 can only install iOS 12, so using this syntax will throw an error on those devices.

    This appears to be an issue within Astro, which does not support some older browsers. Astro also scopes CSS with :where, which will also break on older versions of Safari. On those browsers, your page's HTML should render, but any JavaScript will not work and should be treated as a progressive enhancement.