How Safari Ruined My Tuesday

Summary

Safari 15 introduced an obscure CSS bug that made pointer-events: none persist in LiveView applications. LiveView uses connected and disconnected modes, and its default app.css had included .phx-disconnected * { pointer-events: none; } to disable interaction while disconnected. In Safari 15, the rule could remain effective after reconnection or class changes, leaving links and buttons unresponsive even though the web inspector reported pointer-events: auto. The workaround removes pointer-events: none from app.css, although LiveView already ignores clicks on Phoenix links and buttons while disconnected; LiveView 0.17 instead uses a different disconnected-state class. The change avoids applying the faulty rule from existing user-land CSS while retaining custom loading-state styling, and the post says a Safari Development Preview build might fix the underlying bug.

Takeaways

1. 1

   Safari 15 could leave pointer-events: none active after LiveView reconnected or classes changed, preventing click events even when computed styles showed pointer-events: auto.

2. 2

   Removing pointer-events: none from app.css is viable because LiveView already ignores clicks on Phoenix links and buttons while disconnected.

3. 3

   Phoenix LiveView 0.17 avoids the issue by changing the disconnected-state class name, though the post describes this as a breaking CSS change.