Hacker News Reader

Comment by earp | Hacker News Reader

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.

View on HN

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.

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?

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/...) 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 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.

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

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!

I think I actually had a similar problem, but using `filter`. Don't really remember though.

Reply on news.ycombinator.com