Firefox and nested/numerous flexboxes about flexbugs HOT 10 CLOSED

I'm not getting any crash on OS X Firefox, but Firefox does get pretty laggy, whereas Chrome instantaneously responds to changing the slider.

from flexbugs.

Yeah I can concur that Firefox lags badly at multiple nested flexboxes. A team here at MS actually uses floats on FF to bypass this, which is always an option but a lot of additional work. It would all depend on the size of the team and site/application.

from flexbugs.

thx for your feedbacks guys, I should have been more specific with my comment :

Under IE & Chrome : no latency while dragging the slider left and right, under FireFox, if you scroll too much to the right, Firefox crash… -.-"

It was in a Windows 7 x64 environment and up to date browsers.

from flexbugs.

I am using FF 34.0.5 in Windows 7 Pro x 64 PC and I can confirm that the browser cannot handle multiple nested flexboxes.

from flexbugs.

I'm testing on FF/Mac as well and also notice a ton of lag and a loading spinner.

@Shuunen have you identified a particular depth at which things get really bad? I'm wondering if there's a cliff or if the progression is linear. If there were a point we could recommend not nesting beyond, that would be ideal.

The point of flexbugs is primarily to be able to offer workarounds. I'm hesitant to add a bug that merely suggests: "Don't nest too much".

Have you submitted this to bugzilla, or is there an existing bug for it?

from flexbugs.

@Shuunen I don't have too much time to dig into this one, but I don't think it's just because of nesting flex boxes, especially since you're not doing anything fancy with them. I wrote a simple fuzzer and you can up the number of containers to generate. I was able to create 60K containers inside of one another and Firefox did splendidly. It actually outperformed both Chrome and IE 11 (I'm at home doing this so I couldn't test it against IE12) from an end user POV. At any rate, there has to be something more to this, may I suggest reducing your example and pin-pointing what the lag is. Also, do the reduction on your own box locally so that you aren't fighting something that may be a CodePen issue. Thanks!

from flexbugs.

I've wrote this : http://jsfiddle.net/shuunen/kfq3d1wd/

Here's my browsers on Windows 7 x64 :

• Internet Explorer 11 crash at 60K
• Firefox 34 crash at 130K
• Chrome 39 lag at 130K then I have "Maximum call stack size exceeded" from jQuery

Maybe the problem is not with nesting, I will investigate more.

from flexbugs.

I'm not seeing noticeable lag with the original testcase anymore in Firefox 41.

from flexbugs.

Testing it with static nested flexboxes is not quite correct. Firefox can handle those pretty well.

Firefox is very slow when any of the nested flexbox containers contains changing element. This can be very well seen with contenteditable block inside a several levels of flexbox containers.

If time allows I'll try to create my own fiddle.

from flexbugs.

While performance is an awesome thing to focus on, that's not necessarily what this repo is for. I recommend filing a bug on Firefox once you have a 100% reproducible scenario. Thanks.

from flexbugs.