Mobile Tab Switching Triggers Full Page Reload in LiveView - Is This Expected Behavior?

Phoenix Forum Questions / Help
1

Hi everyone,

I’m working on a Phoenix LiveView application and noticed an annoying behavior on mobile devices: whenever users switch tabs and return to the app, the entire page reloads even if it was fully loaded before. This happens consistently on both iOS and Android browsers.

The Issue

  • User loads a LiveView page on mobile
  • User switches to another browser tab or app
  • User returns to the original tab
  • The socket reconnects and triggers a full page reload, losing scroll position and any client-side state

This creates a poor user experience, especially on slower connections where users have to wait for the entire page to reload.

Our implementation uses standard LiveSocket configuration:

  let liveSocket = new LiveSocket("/live", Socket, {
    timeout: 60000,
    params: { _csrf_token: csrfToken },
    // ... standard configuration
  });

We don’t have any visibilitychange or pageshow/pagehide event handlers

Is this the default Phoenix LiveView behavior? Does LiveView intentionally trigger a full remount when reconnecting after tab switches?

Here a potential solution I’m considering

  // Detect tab visibility changes
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      // Gracefully disconnect?
      liveSocket.disconnect();
    } else {
      // Reconnect without full reload?
      liveSocket.connect();
    }
  });

But I’m unsure if this is the right approach or if it might cause other issues…

2

I haven’t noticed this behaviour in my LiveView projects…

Can you try out my toy LiveView project and see if it still happens?

Also, here’s my liveSocket config:

1 Like