5 ms·

Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems

by earp 11y ago

Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.

M4v3R 11y ago
Can you elaborate on this? What rendering glitches did you encounter?
- earp 11y ago
  There's one right now where a combination of flex and transform3d will cause things to simply disappear in Chrome and Safari but I haven't searched for any issues reported on that. The problem is progressively getting worse, so I'm almost sure you'll encounter it if you play around with those properties. I'm unfortunately not in a position to elaborate much further in this exact moment - but if this only happens to me, I really couldn't be happier!
  - ChrisGaudreau 11y ago
    I think I actually had a similar problem, but using `filter`. Don't really remember though.
Wintamute 11y ago
Try writing idiomatic Flex rules based on the latest spec, and then running through PostCSS Autoprefixer. It smoothes out nearly all of the cross-browser glitches. What performances issues are you talking about?
- earp 11y ago
  Well, I made some code that would emulate flexbox in IE for a specific HTML structure (it would parse classnames in the HTML and not the CSS, the code is still around on https://github.com/wiredearp/spiritual-mix/blob/master/dist/flex.module/flex.module.js https://github.com/wiredearp/spiritual-mix/blob/master/dist/...) but it turned out to run about a hundred times faster than the associated CSS flex that other browsers would use; even in those browsers. The layout must aspire to a certain complexity before it happens, that's why you don't notice it at first (and why I posted the comment). I just checked back with the issue called "Catastrophic flexbox perf" over on https://code.google.com/p/chromium/issues/detail?id=331352 https://code.google.com/p/chromium/issues/detail?id=331352 and it appears that it's now a lot better in Chrome, but you can try to Ctrl+F for "hosted demo" on that page and open the demo in Firefox (you should save your work first!). When the page eventually does appear, you'll see that it's really nothing special, and certainly not worth the wait.
nwah1 11y ago
Exact opposite experience. I like the newest CSS spec, and it is now supported in the vast majority of stable browsers in use. It is an elegant approach to very common layout problems without any libraries, plugins, or javascript. The whole point of markup and CSS is to solve the layout stuff for you. Javascript should be mainly for data transformation. When you throw in web components and two-way data binding via object.observe, we can approach this ideal separation of concerns.

by earp 11y ago

M4v3R 11y ago

Can you elaborate on this? What rendering glitches did you encounter?

earp 11y ago
There's one right now where a combination of flex and transform3d will cause things to simply disappear in Chrome and Safari but I haven't searched for any issues reported on that. The problem is progressively getting worse, so I'm almost sure you'll encounter it if you play around with those properties. I'm unfortunately not in a position to elaborate much further in this exact moment - but if this only happens to me, I really couldn't be happier!
- ChrisGaudreau 11y ago
  I think I actually had a similar problem, but using `filter`. Don't really remember though.

Wintamute 11y ago

Try writing idiomatic Flex rules based on the latest spec, and then running through PostCSS Autoprefixer. It smoothes out nearly all of the cross-browser glitches. What performances issues are you talking about?

earp 11y ago
Well, I made some code that would emulate flexbox in IE for a specific HTML structure (it would parse classnames in the HTML and not the CSS, the code is still around on https://github.com/wiredearp/spiritual-mix/blob/master/dist/flex.module/flex.module.js https://github.com/wiredearp/spiritual-mix/blob/master/dist/...) but it turned out to run about a hundred times faster than the associated CSS flex that other browsers would use; even in those browsers. The layout must aspire to a certain complexity before it happens, that's why you don't notice it at first (and why I posted the comment). I just checked back with the issue called "Catastrophic flexbox perf" over on https://code.google.com/p/chromium/issues/detail?id=331352 https://code.google.com/p/chromium/issues/detail?id=331352 and it appears that it's now a lot better in Chrome, but you can try to Ctrl+F for "hosted demo" on that page and open the demo in Firefox (you should save your work first!). When the page eventually does appear, you'll see that it's really nothing special, and certainly not worth the wait.

nwah1 11y ago

Exact opposite experience. I like the newest CSS spec, and it is now supported in the vast majority of stable browsers in use. It is an elegant approach to very common layout problems without any libraries, plugins, or javascript. The whole point of markup and CSS is to solve the layout stuff for you. Javascript should be mainly for data transformation. When you throw in web components and two-way data binding via object.observe, we can approach this ideal separation of concerns.