I can reproduce the issue on Safari for Mac, so it does not seem to be a problem with the Instagram in-app browser only.

One thing I notice is this error:

Refused to connect to wss://garageratz.com/live/websocket?_csrf_token=...
...because it does not appear in the connect-src directive of the Content Security Policy.

I think the problem is that Phoenix LiveView JS fails to connect to the channel due to a CSP violation, and therefore triggers a reload after a timeout. The violation seems to be that your Content-Security-Policy header contains connect-src 'self';. According to MDN:

‘self’ Refers to the origin from which the protected document is being served, including the same URL scheme and port number.

So wss://garageratz.com/... is disallowed, because it uses a different URL scheme than https://garageratz.com.

Note that Chrome is more permissive than Safari when it comes to CSP, which explains why the issue does not occur on Chrome. See this issue for details.

I can confirm that on Safari for Mac now the websocket connects fine, and the page does not reload anymore. I do not have Instagram myself, so I cannot check there, but the CSP issue seems fixed. If the reload still happens on Instagram, it could be a bug specific to that context.

I am unable to see any issue on Safari 14.2 unfortunately. You could try something like https://www.browserstack.com/ if you don’t have access. I’ve not used it personally though, cant say if its worth the time (and money) or not.

Do you have the correct host, scheme and port set in your config/runtime|prod.exs?

I _dont_ think this would be the actual issue here (you (should?) would see other browsers misbehaving), but you never know with browsers TBH.

Can you see the user agent logs from an instagram request? Might give you a clue as to which webkit/safari build to check into.

Also does is occur when running on your dev machine? (Probably need to make a burner account to point to your local network address to test this in the app.)