Comments (10)
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.
Related Issues (20)
- ie nested flexbox with wrap overflow bug
- inline block content in a flex container not displaced
- #4 more accurate description HOT 1
- 'Flex-direction: column' in IE11 interacts badly with 'display: table'
- `flex: 1 1 0%` is different from flex: `1 1 0px` HOT 2
- Confusing issue template HOT 6
- IE11: align-items calculate baseline as bottom of table inside flex item
- .
- iOS Safari: align-items calculates baseline as bottom of input element HOT 4
- Minimum sizing of nested flexbox in Safari HOT 7
- webkit not honouring flex-basis percentage width with images HOT 1
- CodePen does NOT support Internet Explorer 11 (IE11) HOT 14
- Addition to Flexbug #9: IE11 <tr> Element (Table Row) does not Support Flexbox
- The codepens for 12.1a and 12.1b have the same code HOT 3
- flex button child height not accepting 100 percent HOT 1
- Need code review and want to understand my hack about height=0px HOT 1
- column flex: wrong width on automatically resized img
- Align-self:center contents overflow combined with a parent's flex-direction:column
- Cant understand this issues
- Flexbug #12 (Inline elements not treated as flex-items) affected Safari 8, fixed in 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flexbugs.