Asto SSR 生成的代码不能在旧版本的 iOS 上运行

Question

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 '?'

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.

Answer 1

This sounds like you have some code using optional chaining, eg 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.