Weird slow rendering in Chrome for LiveView with select field

I have a simple :live_view which retrieves countries from the database and sets them in mount to be used in the live view template, as assigns.

Liveview .leex template contains a simple select:
<%= select f, :registered_country, @countries %>

This works perfectly fine in Firefox and renders instantly, as expected.

But, in Chrome it takes 10 seconds (!) to render the select (removing it, or replacing the data with empty list makes the rendering work instantly).

Profiling in Chrome show that it stays in “Recalculate Style” step for all of this time, which doesn’t really make much sense as there are no classes involved on select or options inside of it.

Profiling mentions the removeClass method from phoenix_liveview.js :

removeClass @ phoenix_live_view.js?2c90:1

This seems like a really trivial case, and issue seems to be client-side. Lowering the number of items sent (e.g. Enum.take(countries, 10) makes the whole thing work fine in Chrome, but obviously this just confirms the issue is the processing of the returned data on the client side, and is not usable as a solution.

issue

Weird issue, any ideas what to look at to solve this?

Have you tried debugging the remove class method?

Maybe it’s worth submitting a bug for this.

I seems to be a bug, yes. I have isolated the issue to the simplest possible case, this is the whole LiveView template:

<select>
    <%= for {code, name} <- @countries do %>
    <option value="<%= code %>"><%= name %></option>
    <% end %>
</select>

It cooks the CPU at 100% in Chrome for 5 seconds, for measly 250 countries in the options list.

1 Like

Did you report this bug?

I am fairly sure this is not (at least not wholly) an issue with LiveView, but rather browser rendering in general. I’ve gotten the same problem before with large select/options list and my search led me to believe it was browser related.

Last time I checked it was somewhere on a Chrome issue tracker which I can’t find now, but here’s one example of a similar report - https://bugzilla.mozilla.org/show_bug.cgi?id=286257

Yes, and closed it. It is related to Chrome somehow:

It seems to be an issue, in my case, somewhere in the classes imported from tailwindcss/utilities (removing tailwindcss/utilities makes rendering of selects instant), which seem to cause the browser to recalculate some expensive rendering operations for “large” number of options in a select field. I still haven’t found the exact CSS issue.

1 Like