LiveView socket flickering on Firefox

Learning Questions & Discussions Resources Chat/Questions
,
1

Hey guys,

I have just started to learn how to build my first live app and noticed something. I am on a Mac OSX 13 and all works great on Safari (Version 11.0.1 ), Chrome (84.0.4147) and Opera (69.0.3686) but on Firefox (79.0) for some reason the socket connection either drops or something happens. I was doing the Counter tutorial and played with it to just try doing it differently. However i go the same result. After some more clicks on the buttons Firefox just stops updating the values. Just so you know i have not done the GenServer implementation on that tutorial - just simple @topic updates over the wire.

2

Same problem here…

3

Does your console tab shows something similar to this?

Screenshot from 2020-08-20 19-46-44
Screenshot from 2020-08-20 19-46-441919×349 83.2 KB

My app works fine, except for the fact that shows that failures to connect to the socket:

Firefox can't establish a connection to the server at ws://localhost:2000

But like you in other browsers it works without any issue, like in Chrome:

Screenshot from 2020-08-20 19-46-28
Screenshot from 2020-08-20 19-46-281366×323 40 KB

Maybe someone else with more knowledge of Live View can shed some pointers?

4

Yeah, it looks the same on desktop Firefox (Mac). But on iOS it is completely broken and LiveView can’t connect at all. I have no idea how to debug Firefox on iOS, though.

1 Like
5

This seems like a bug? Maybe create a bug on github?

6

It would also be interesting to see if this only happens with liveview, or if phx channels also have issues

7

I think I’ve seen this behavior too. But it seems to happen mostly on Dev. Don’t think I’ve seen it on prod.

8

What’s your LiveView’s version? I think phx.new use LiveView 0.12.x, try update to 0.14.x.

10

I just noticed I got this same issue with firefox but not on chrome. I’m on latest version of phoenix 1.7 and latest live view 0.18.16.

One thing I did notice though was that on firefox I get these 2 messages in devtools which don’t appear in chrome. There are no other warnings or errors in devtools or any in the elixir console.

phx-F0cLkPGu7S9EO0VE destroyed: the child has been removed from the parent -  undefined app.js:1397:15
 destroyed: the child has been removed from the parent -  undefined
11

Yes, it has started being weird on Firefox lately. Seems to happen when the code reloader triggers a reload. Gets itself in and endless loop.