When I stream_insert/4 into an existing stream on a live view, it causes the scroll position to change.
For example, in this simply live view the “update” event causes the page to scroll to the top.
defmodule MyAppWeb.TempLive do
use MyAppWeb, :live_view
import ...
alias ...
def mount(_, _, socket) do
{:ok, stream(socket, :posts, get_post_feed())}
end
def render(assigns) do
~H"""
<div
id="stream"
phx-update="stream"
class="flex flex-col gap-10"
>
<%= for {dom_id, post} <- @streams.posts do %>
<div id={dom_id}>
<p><%= post.message %></p>
<button phx-click="update" phx-value-id={post.id}>Click</button>
</div>
<% end %>
</div>
"""
end
def handle_event("update", %{"id" => id}, socket) do
{:noreply, stream_insert(socket, :posts, %Post{id: id, message: "Updated message"})}
end
end
I looked around in the TodoTrek repo (GitHub - chrismccord/todo_trek) to see if I’ve missed some client side hook for managing scroll position or something along those lines. But I didn’t find anything to explain why I get the scroll jumping while other seem to don’t.
Just to rule a few things out:
-
What version of LiveView are you using? There were some bugs with streams over the past few patch releases that could be causing this.
-
What does your update function look like? Does a post contain images that are getting written to priv? When I had this issue it was because I was writing to a directory that was being picked up by Live Reload. I realize that isn’t a scroll position change but just asking in case.
I also upgrade to the latest version of LiveView (0.20.9) just now, to rule out that being the reason.
1 Like
Ah ok, I thought you were omitting a call to a context function to brevity. hmmmmmmm not sure off the top of my head 
It was sort of…
In reality I would do something like:
{:noreply, stream_insert(socket, :posts, get_post_for_feed(id))}
But in essence that’s very similar: replacing the whole post, with one field being updated to a new value.
So it also happens with in this version (removing my own database fetch to make it fully transparent). Also, not using a layout (app.html.heex).
defmodule MyAppWeb.TempLive do
use MyAppWeb, :live_view
def mount(_, _, socket) do
posts = [
%{id: 1, message: "First post"},
%{id: 2, message: "Second post"},
%{id: 3, message: "Third post"},
%{id: 4, message: "Fourth post"},
%{id: 5, message: "Fifth post"},
%{id: 6, message: "Sixth post"},
%{id: 7, message: "Seventh post"},
%{id: 8, message: "Eighth post"},
%{id: 9, message: "Ninth post"},
%{id: 10, message: "Tenth post"}
]
{:ok, stream(socket, :posts, posts)}
end
def render(assigns) do
~H"""
<div
id="stream"
phx-update="stream"
class="flex flex-col gap-10"
>
<%= for {dom_id, post} <- @streams.posts do %>
<div id={dom_id}>
<p><%= post.message %></p>
<button phx-click="update" phx-value-id={post.id}>Click</button>
</div>
<% end %>
</div>
"""
end
def handle_event("update", %{"id" => id}, socket) do
{:noreply, stream_insert(socket, :posts, %{id: id, message: "Updated message"})}
end
end
It doesn’t happen on Firefox mobile for Android… At least not for the example I have tested.
I tried your code and can’t reproduce it. What browser is it failing in for ? I’m using Chromium (Arc and I even dusted off Chrome to give it a try). I also tried in Safari.
1 Like
A whole host of them both on MacOS and Windows. Tried Safari, Chrome, Edge and FireFox.
But the fact that you cannot reproduce it helps. Tomorrow morning I’m going to try to reproduce it on a newly generate LiveView app.
Mysterious.
Maybe some setting/config in my app… Or client side hook…
Very strange!
Is it actually scroll position changing or is it items getting resorted? It could be the version thing and you just need to clear your cache, though I imagine that has crossed your mind, I’m just grabbing at straws here!
It’s the scroll position. The update is handled correctly.
The IDs of the post elements are also correctly updated (that is: not changed or shuffled).
Sooooo strange. Possibly a bug but trying it in a new app is a good idea.
1 Like
I found the culprit (besides myself 
).
I had a JavaScript mutation observer set up for preventing body scroll behind a dialog element. It was implemented poorly and apparently also messed with LiveView’s stream scroll persistence behaviour.
1 Like
Lol, hey glad you found it! Happy to have been a rubber duck 
1 Like
I have the exact same issue and it’s driving me mad.
What in excruciating detail made it not work?
Can’t for the life of me figure out why it just resets the position on insert.
My code is almost identical to the one you have in the first post but I have a hook to scroll to bottom but removing it doesn’t change anything 
I had a similar problem and the cause for me was the element with phx-update and phx-viewport-bottom and phx-viewport-top was not the scrolling element. The parent element was the one that was doing the scrolling. Once I fixed up the css to force the correct element to scroll it worked as expected.
