1229764 - Slow working of a HTML aplication using a lot of DOM elements with flexbox layout attributes

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

Steps to reproduce:

Our team develops an ERP system where the end user client application is HTML5 application. 
Html pages that create application's GUI, use css flexbox attributes like: display:flex, flex:1 and others.
Some pages are quite complex - I mean there is a lot of DOM elements using flexbox attributes as well as they are deeply nested inside each other.
With this complex pages we are experiencing a serious performance problem - pages render very slow. Sometimes it takes several dozen of seconds, sometimes even hangs on application completely.
On other browsers (Google Chrome, Internet Explorer, Safari and Opera) this problem does not occur.

I prepared a test environment for you where this issue can be seen.

It is available under the address: http://mars.commersoft.pl/H5/Default.aspx?LoadBaseSkin=0&CPG=C512F508-92F1-4F5D-933E-AC4F475829E5&CSIDENT=MAIN&WORKLOCAL=3&csB2BPortalsStart=6D162801-CC15-4C15-90A4-B9C0D0FB6E44&Skin=CePixel&ALLOWFIREFOX=1

To logon please use the following values - login: mozilla , password: M0zFl#xTeS%

The logon page is quite simple and it works fast, but after logging in, the dashboard page is loaded which is quite complex and causes application freeze.

Comment 1

[Daniel Holbert [:dholbert]]

This is likely due to resolution of flexbox's "min-width:auto" special value (which causes an extra layout pass at each level of nested flex containers).

As a workaround, the following CSS seems to improve the application's responsiveness (and fight off hangs) quite a bit:
 * { min-width: 0; min-height: 0 }
and it doesn't seem to impact the sizing behavior.

(Note that "0" is the traditional value of these properties; flexbox introduces a new default value "auto" to try to avoid overflow in constrained-space scenarios, but it's expensive to resolve, in Firefox at least.)

Could you let me know if this workaround seems to help on your end?

Comment 2

[Artur]

Daniel, thank you very much for quick answer.

I applied changes you suggested, but unfortunatelly I can not see any noticable improvement.

Under the address I provided in the first post, there is now the application with applied changes installed, so you can use it for further tests.

Comment 3

[Paul Silaghi, QA [:pauly]]

I confirm the freeze in 45.0a1 (2015-12-07) Win 7.
Works fine in Chrome.

Comment 4

[Jack]

Any updates on this? Layouting is really slow compared to edge, ie and chrome.

We also have cases where firefox starts flickering during layouting flex layouts.

Comment 5

[Daniel Holbert [:dholbert]]

The original bug here seems to have been fixed.

The login page still loads (though it's only available over http - its https configuration is broken - so I've taken the liberty to drop the "s" from the URL in comment 0).
The test credentials still work to log in to a dashboard view.

When I log in, the dashboard is quite responsive. There are some noticeable delays (for me) during login, but the profiler seems to indicate that those are due to slow network loads (possibly due to my geographical location in the US rather than in poland, where I'm guessing the site is due to .pl suffix).

Here's a profile I captured: https://share.firefox.dev/3cYNjPA
It shows only 100ms with "reflow" in the backtrace, and no individual reflow in the marker chart looks particularly terrible (there's one that's 11ms long, and I think it's the worst -- and that's nowhere near the dozens-of-seconds figures reported in comment 0).

So I think this must have been fixed either on the Firefox side or on the site's side.

To Jack, from comment 4: sorry for leaving your question un-answered. If you're still seeing issues with another site, could you file a new bug and CC me on it or post the bug number here? (And please include the site's URL -- or even better, post a standalone testcase, if possible.) Thanks!