Live reloading of HTML/CSS changes forces scroll to top of page

Phoenix Forum Questions / Help
,
1

I’ve noticed that when live reloads are triggered the page scroll returns to the very top of the page instead of maintaining scroll position. This is pretty frustrating when designing/building something farther down on the page, since you then have to scroll back to where you were to see the changes.

I’m assuming this is because of how LiveView is re-rendering everything in the DOM, but has anyone found a way around this?

GIF (20MB): https://i.nick.sg/76da4e1c362346b389eb30f51926ca12.gif

2 Likes
2

I’ve also noticed just reloading pages always scrolls the page back to the top as well, even if you’re just refreshing (and maybe that’s all the live-reload is doing…). Typically browsers will maintain scroll position on pages if you are scrolled down and you refresh the page, but this doesn’t seem to be happening with LiveView-rendered pages.

3

And I’ve confirmed that this behavior only exists for LiveView rendered pages. Traditional Phoenix views do not exhibit the issue. Reloading the page when scrolled down a bit maintains that same scroll position after reloading, and the live-reload functionality also maintains scroll position when triggering that reload as well.

4

Oh this might be relevant:

5

Ever find a solution to this? I’ve been trying to solve it today as well, it’s quite annoying.

2 Likes
6

I think I found the solution. I was reading through the tests on this PR and realized my live_reloader configs were leveraging the notify functionality.

# config/dev.exs

# Watch static and templates for browser reloading.
config :demo, DemoWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/demo_web/(controllers|components)/.*(ex|heex)$"
    ],
    notify: [
      live_view: [
        ~r"lib/demo_web/components.ex$",
        ~r"lib/demo_web/live/.*(ex|heex)$"
      ]
    ]
  ]

That seemed to fix it in my app

1 Like