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

NEW
Unassigned

Status

()

3 years ago
2 years ago

People

(Reporter: artur.koszewski, Unassigned, NeedInfo)

Tracking

(Blocks: 1 bug)

45 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
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: https://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.
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?
Flags: needinfo?(artur.koszewski)
(Reporter)

Comment 2

3 years ago
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.
Flags: needinfo?(artur.koszewski)
I confirm the freeze in 45.0a1 (2015-12-07) Win 7.
Works fine in Chrome.
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Product: Firefox → Core
Flags: needinfo?(dholbert)

Comment 4

3 years ago
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.
Blocks: 1304473
You need to log in before you can comment on or make changes to this bug.